詳解Angular結構型指令模組和樣式

阿新 • • 發佈：2021-05-24

一，結構型指令

*是一個語法糖,<a *ngIf="user.login">退出</a>相當於

<ng-template [ngIf]="user.login">

</ng-template>

避免了寫ng-template。

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

結構型指令為什麼能改變結構？

ngIf原始碼

詳解Angular結構型指令模組和樣式

set方法標記為@Input，如果條件為真而且不含view的話，把內部hasView標識位置為true然後通過viewContainer根據template建立一個子view。

條件不為真就用檢視容器清空所含內容。

viewContainerRef：容器，指令所在的檢視的容器

二，模組Module

什麼是模組？獨立功能的檔案集合，用來組織檔案。

模組元資料

entryComponents:進入模組就要立刻載入的（比如對話方塊），而不是呼叫的時候載入。

exports:模組內部的想要讓大家公用，一定要export出來。

forRoot()是什麼?

imports: [RouterModule.forRoot(routes)],

imports: [RouterModule.forChild(route)];

其實forRoot和forChild是兩個靜態工廠方法。

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

元資料根據不同情況會變化，元資料沒辦法動態指定，不寫元資料，直接構造一個靜態的工程方法，返回一個Module。

寫一個forRoot()

建立一個serviceModule:$ ng g m services

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

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

ServiceModule裡面的元資料不要了。用一個靜態方法forRoot返回。

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

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

在core Module中匯入的時候使用

imports: [ServicesModule.forRoot();]

三，風格定義

ngClass,ngStyle和[class.yourclass]

ngClass：用於條件動態指定樣式類，適合對樣式做大量更改的情況。預先定義好class。

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

ngStyle：用於條件動態指定樣式，適合少量更改的情況。比如下面例子中[ngStyle]="{'order':list.order}"。key是一個字串。

[class.yourclass] ：[class.yourclass] = "condition"直接對應一個條件。這個condition滿足適合應用這個class。等價於ngClass的寫法，相當於是ngClass的變體，簡寫。

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

使用ngStyle在拖拽的時候調整順序

原理就是動態指定flex容器樣式的order為list模型物件裡的order。

1、在taskHome中給app-task-list新增orwww.cppcns.comder

list-container是一個flex容器，它的排列順序是按照order去排序的。

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

2、list資料結構裡需要有order，所以增加order屬性

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: [
  iEVFbXAK      {
          id: 1,desc: "任務三： 專案程式碼評審",priority: 1,name: "王五",avatar: "avatars:svg-13"
          },dueDate: new Date()
        },desc: "任務一： http://www.cppcns.com制定專案計劃",dueDate: new Date()
        }
      ]
    }
  ];

3、在list拖拽換順序的時候，改變order

交換兩個srcList和目標list的順序order

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

以上就是詳解Angular結構型指令模組和樣式的詳細內容，更多關於Angular結構型指令模組和樣式的資料請關注我們其它相關文章！