Detaillierte Erläuterung der Strukturanweisungen, Module und Stile in Angular

Verwandte Empfehlungen: „angular Tutorial“

1. Strukturdirektive

* ist ein Syntaxzucker, Exit

<ng-template [ngIf]="user.login">
  <a>退出</a>
</ng-template>

das Schreiben von NG-Templates zu vermeiden.

<ng-template [ngIf]="item.reminder">
      <mat-icon >
        alarm
      </mat-icon>
    </ng-template>
    
    <!-- <mat-icon *ngIf="item.reminder">
      alarm
    </mat-icon> -->

Warum können Strukturanweisungen die Struktur verändern?

ngWenn der Quellcode

set-Methode als @Input markiert ist, setzen Sie die interne hasView-Flag-Position auf true und erstellen Sie eine Unteransicht basierend auf der Vorlage über den viewContainer.

Wenn die Bedingung nicht erfüllt ist, verwenden Sie den Ansichtscontainer, um den Inhalt zu löschen.

viewContainerRef: Container, der Container der Ansicht, in der sich die Anweisung befindet

Zweites Modul Modul

Was ist ein Modul? Eine Sammlung von Dateien mit unabhängigen Funktionen zum Organisieren von Dateien.

Modulmetadaten

entryComponents: Sie sollten sofort nach dem Betreten des Moduls (z. B. einem Dialogfeld) geladen werden, nicht wenn es aufgerufen wird.

Exporte: Wenn Sie möchten, dass alles innerhalb des Moduls von allen geteilt wird, muss es exportiert werden.

Was ist forRoot()?

imports: [RouterModule.forRoot(routes)],

imports: [RouterModule.forChild(route)];

Tatsächlich sind forRoot und forChild zwei statische Factory-Methoden.

constructor(guard: any, router: Router);
    /**
     * Creates a module with all the router providers and directives. It also optionally sets up an
     * application listener to perform an initial navigation.
     *
     * Options (see `ExtraOptions`):
     * * `enableTracing` makes the router log all its internal events to the console.
     * * `useHash` enables the location strategy that uses the URL fragment instead of the history
     * API.
     * * `initialNavigation` disables the initial navigation.
     * * `errorHandler` provides a custom error handler.
     * * `preloadingStrategy` configures a preloading strategy (see `PreloadAllModules`).
     * * `onSameUrlNavigation` configures how the router handles navigation to the current URL. See
     * `ExtraOptions` for more details.
     * * `paramsInheritanceStrategy` defines how the router merges params, data and resolved data
     * from parent to child routes.
     */
    static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>;
    /**
     * Creates a module with all the router directives and a provider registering routes.
     */
    static forChild(routes: Routes): ModuleWithProviders<RouterModule>;
}

Metadaten ändern sich je nach Situation. Ohne das Schreiben von Metadaten können Sie direkt eine statische Engineering-Methode erstellen und ein Modul zurückgeben.

Schreiben Sie ein forRoot()

Erstellen Sie ein ServiceModule: $ ng g m Services

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class ServicesModule { }

Die Metadaten im ServiceModule werden nicht benötigt. Rückkehr mit einer statischen Methode forRoot.

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule()
export class ServicesModule { 
  static forRoot(): ModuleWithProviders{
    return {
      ngModule: ServicesModule,
      providers:[]
    }
  }
}

Beim Importieren im Kernmodul verwenden

imports: [ServicesModule.forRoot();]

Drei, Stildefinition

ngClass, ngStyle und [class.yourclass]

ngClass: verwendete Bedingungen werden dynamisch angegeben Stilklassen, die für Situationen geeignet sind, in denen viele Änderungen am Stil vorgenommen werden. Definieren Sie die Klasse im Voraus.

<mat-list-item class="container" [@item]="widerPriority" [ngClass]="{
  &#39;priority-normal&#39;:item.priority===3,
  &#39;priority-important&#39;:item.priority===2,
  &#39;priority-emergency&#39;:item.priority===1
}"

<div class="content" mat-line [ngClass]="{&#39;completed&#39;:item.completed}">
    <span [matTooltip]="item.desc">{{item.desc}}</span>
</div>

ngStyle: Wird zur bedingten dynamischen Angabe von Stilen verwendet, geeignet für kleine Änderungen. Zum Beispiel [ngStyle]="{'order':list.order}" im folgenden Beispiel. Schlüssel ist eine Zeichenfolge.

[class.yourclass]: [class.yourclass] = „condition“ entspricht direkt einer Bedingung. Diese Bedingung ist erfüllt und für die Anwendung dieser Klasse geeignet. Die Schreibmethode, die ngClass entspricht, entspricht einer Variante und Abkürzung von ngClass.

<div class="content" mat-line [class.completed]="item.completed">
    <span [matTooltip]="item.desc">{{item.desc}}</span>
</div>

1. Verwenden Sie ngStyle, um die Reihenfolge beim Ziehen anzupassen.

Das Prinzip besteht darin, die Reihenfolge des Flex-Container-Stils dynamisch als Reihenfolge im Listenmodellobjekt anzugeben.

1. Reihenfolge zur App-Aufgabenliste in taskHome hinzufügen

list-container ist ein flexibler Container und seine Anordnungsreihenfolge basiert auf der Reihenfolge.

<app-task-list *ngFor="let list of lists" 
  class="list-container"
  app-droppable="true"
  [dropTags]="[&#39;task-item&#39;,&#39;task-list&#39;]"
  [dragEnterClass]=" &#39;drag-enter&#39; "
  [app-draggable]="true"
  [dragTag]=" &#39;task-list&#39; "
  [draggedClass]=" &#39;drag-start&#39; "
  [dragData]="list"
  (dropped)="handleMove($event,list)"
  [ngStyle]="{&#39;order&#39;: list.order}"
  >

2. Es muss eine Reihenfolge in der Listendatenstruktur vorhanden sein, also fügen Sie das Bestellattribut hinzu

lists = [
    {
      id: 1,
      name: "待办",
      order: 1,
      tasks: [
        {
          id: 1,
          desc: "任务一： 去星巴克买咖啡",
          completed: true,
          priority: 3,
          owner: {
            id: 1,
            name: "张三",
            avatar: "avatars:svg-11"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任务一： 完成老板布置的PPT作业",
          completed: false,
          priority: 2,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    },
    {
      id: 2,
      name: "进行中",
      order:2,
      tasks: [
        {
          id: 1,
          desc: "任务三： 项目代码评审",
          completed: false,
          priority: 1,
          owner: {
            id: 1,
            name: "王五",
            avatar: "avatars:svg-13"
          },
          dueDate: new Date()
        },
        {
          id: 2,
          desc: "任务一： 制定项目计划",
          completed: false,
          priority: 2,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    }
  ];

3 Wenn Sie die Liste ziehen, um die Reihenfolge zu ändern, ändern Sie die Reihenfolge Zielliste

handleMove(srcData,targetList){
    switch (srcData.tag) {
      case 'task-item':
        console.log('handling item');
        break;
      case 'task-list':
        console.log('handling list');
        const srcList = srcData.data;
        const tempOrder = srcList.order;
        srcList.order = targetList.order;
        targetList.order = tempOrder;
      default:
        break;
    }
  }

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Strukturanweisungen, Module und Stile in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!