Explication détaillée des directives structurelles, des modules et des styles dans Angular

Recommandations associées : "Tutoriel angulaire"

Directives structurelles

* est un sucre syntaxique, exit est équivalent à

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

qui évite d'écrire ng-template.

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

Pourquoi les instructions structurelles peuvent-elles changer la structure ?

Code source ngIf

La méthode set est marquée comme @Input Si la condition est vraie et ne contient pas de vue, définissez l'identification hasView interne. position sur true, puis transmettez le viewContainer Créez une sous-vue basée sur le modèle.

Si la condition n'est pas vraie, utilisez le conteneur de vue pour effacer le contenu.

viewContainerRef : conteneur, le conteneur de la vue où se trouve l'instruction

2. Module Module

Qu'est-ce que c'est. un module ? Une collection de fichiers avec des fonctions indépendantes pour organiser les fichiers.

Métadonnées du module

entryComponents : Il est chargé immédiatement lors de la saisie du module (comme une boîte de dialogue), pas lorsqu'il est appelé.

exports : Si vous souhaitez que tout ce qui se trouve dans le module soit partagé par tout le monde, il doit être exporté.

Qu'est-ce que forRoot() ?

importations : [RouterModule.forRoot(routes)],

importations : [RouterModule.forChild(route)];

En fait, forRoot et forChild sont deux méthodes d'usine statique.

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>;
}

Les métadonnées changeront en fonction de différentes situations. Les métadonnées ne peuvent pas être spécifiées dynamiquement sans écrire de métadonnées, construisez directement une méthode d'ingénierie statique et renvoyez un module.

Écrivez un forRoot()

Créez un serviceModule :$ ng g m services

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

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

Les métadonnées du ServiceModule ne sont pas nécessaires. Revenez avec une méthode statique forRoot.

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

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

Utilisez

importations : [ServicesModule.forRoot();]

3. Définition du style

ngClass, ngStyle et [class.yourclass]

ngClass : utilisés pour spécifier de manière conditionnelle et dynamique des classes de style, adaptées aux situations où un grand nombre de modifications sont apportées au style. Définissez la classe à l’avance.

<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
}"

rrree

ngStyle : utilisé pour spécifier dynamiquement et conditionnellement des styles, adaptés aux petits changements. Par exemple, [ngStyle]="{'order':list.order}" dans l'exemple suivant. la clé est une chaîne.

[class.yourclass] : [class.yourclass] = "condition" correspond directement à une condition. Cette condition est remplie et convient pour appliquer cette classe. La méthode d'écriture équivalente à ngClass équivaut à une variante et une abréviation de ngClass.

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

1. Utilisez ngStyle pour ajuster l'ordre lors du glissement.

Le principe est de spécifier dynamiquement l'ordre du style du conteneur flex comme l'ordre dans l'objet modèle de liste.

1. Ajouter un ordre à la liste des tâches d'application dans taskHome

list-container est un conteneur flexible et son ordre de disposition est basé sur l'ordre.

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

2. Il doit y avoir un ordre dans la structure de données de la liste, alors ajoutez l'attribut order

<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}"
  >

3. Lorsque vous faites glisser la liste pour modifier l'ordre, modifiez l'ordre

.

et échangez les deux L'ordre de srcList et target list

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()
        }
      ]
    }
  ];

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!