Detailed explanation of structural directives, modules and styles in Angular

Related recommendations: "angular tutorial"

1, Structural directives

* is a syntactic sugar, exit is equivalent to

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

which avoids writing ng-template.

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

Why can structural instructions change the structure?

ngIf source code

The set method is marked as @Input. If the condition is true and does not contain a view, set the internal hasView identification position to true and then pass the viewContainer Create a subview based on the template.

If the condition is not true, use the view container to clear the content.

viewContainerRef: container, the container of the view where the instruction is located

2, module Module

What is a module? A collection of files with independent functions for organizing files.

Module metadata

entryComponents: It is loaded immediately when entering the module (such as a dialog box), not when it is called.

exports: If you want everything inside the module to be shared by everyone, it must be exported.

What is forRoot()?

imports: [RouterModule.forRoot(routes)],

imports: [RouterModule.forChild(route)];

In fact, forRoot and forChild are two static factory methods.

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

Metadata will change according to different situations. Metadata cannot be specified dynamically. Without writing metadata, directly construct a static engineering method and return a Module.

Write a forRoot()

Create a serviceModule:$ ng g m services

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

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

The metadata in the ServiceModule is not needed. Return with a static method forRoot.

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

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

Use when importing in core Module

imports: [ServicesModule.forRoot();]

Three, style definition

ngClass, ngStyle and [class.yourclass]

ngClass: used to conditionally dynamically specify style classes, suitable for situations where a large number of changes are made to the style. Define the class in advance.

<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: Used to conditionally dynamically specify styles, suitable for small changes. For example, [ngStyle]="{'order':list.order}" in the following example. key is a string.

[class.yourclass]: [class.yourclass] = "condition" directly corresponds to a condition. This condition is met and is suitable for applying this class. The writing method equivalent to ngClass is equivalent to a variant and abbreviation of ngClass.

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

1, use ngStyle to adjust the order when dragging.

The principle is to dynamically specify the order of the flex container style as the order in the list model object.

1. Add order to app-task-list in taskHome

list-container is a flex container, and its order is sorted according to 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}"
  >

2. There needs to be an order in the list data structure, so add the order attribute

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. When dragging the list to change the order, change the order

Exchange the two The order of srcList and target list

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

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of Detailed explanation of structural directives, modules and styles in Angular. For more information, please follow other related articles on the PHP Chinese website!