Angular の構造ディレクティブ、モジュール、スタイルの詳細な説明

#関連する推奨事項: 「

angular チュートリアル 」

1、構造ディレクティブ

* は糖衣構文で、exit は、ng-template の作成を回避する

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

と同等です。

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

なぜ構造命令によって構造が変化するのでしょうか?

ngIf ソース コード

設定メソッドは @Input としてマークされています。条件が true でビューが含まれていない場合は、内部の hasView 識別子を設定します。 Position を true に設定し、viewContainer を渡します。 テンプレートに基づいてサブビューを作成します。

条件が true でない場合は、ビュー コンテナを使用してコンテンツをクリアします。

viewContainerRef: コンテナ、命令が配置されているビューのコンテナ

2、モジュール Module

とはモジュール？ファイルを整理するための独立した機能を持つファイルの集合。

モジュール メタデータ

entryComponents: 呼び出されたときではなく、モジュール (ダイアログ ボックスなど) に入るときにすぐにロードされます。

エクスポート: モジュール内のすべてを全員で共有したい場合は、エクスポートする必要があります。

forRoot() とは何ですか?

imports: [RouterModule.forRoot(routes)],

imports: [RouterModule.forChild(route)];

実際、forRoot と forChild は 2 つの静的ファクトリ メソッドです。

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

メタデータは状況に応じて変化します。メタデータを動的に指定することはできません。メタデータを記述せずに、直接静的エンジニアリングメソッドを構築してモジュールを返します。

forRoot() を記述します

serviceModule を作成します:$ ng g m services

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

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

ServiceModule 内のメタデータは必要ありません。 Root の静的メソッドで返します。

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

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

コアモジュールでインポートするときに使用します

imports: [ServicesModule.forRoot();]

3、スタイル定義

ngClass、ngStyle および [class.yourclass]

ngClass: スタイル クラスを条件付きで動的に指定するために使用され、スタイルに多数の変更が加えられる状況に適しています。事前にクラスを定義しておきます。

<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: 条件付きで動的にスタイルを指定するために使用され、小さな変更に適しています。たとえば、次の例では [ngStyle]="{'order':list.order}" です。キーは文字列です。

[class.yourclass]: [class.yourclass] = "condition" は条件に直接対応します。この条件は満たされており、このクラスの適用に適しています。 ngClassと同等の記述方法は、ngClassの変形、略称に相当します。

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

1、ドラッグするときに ngStyle を使用して順序を調整します。

原則は、フレックス コンテナ スタイルの順序をリスト モデル オブジェクト内の順序として動的に指定することです。

1. taskHome の app-task-list に order を追加します。

list-container はフレックス コンテナであり、その順序は 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. リストのデータ構造には順序が必要なので、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: [
        {
          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. リストをドラッグして順序を変更する場合は、順序を変更します

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

プログラミング関連の知識の詳細については、

プログラミング ビデオをご覧ください。 ！

以上がAngular の構造ディレクティブ、モジュール、スタイルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。