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

<ng-template [ngIf]="item.reminder">
      <mat-icon>
        アラーム
      </mat-icon>
    </ng-テンプレート>
    
    <!-- <mat-icon *ngIf="item.reminder">
      アラーム
    </mat-icon> -->

コンストラクター(ガード: any、ルーター: Router);
    /**
     * すべてのルータープロバイダーとディレクティブを含むモジュールを作成します。また、オプションで
     * アプリケーション リスナーが初期ナビゲーションを実行します。
     *
     * オプション（`ExtraOptions` を参照）:
     * * `enableTracing` により、ルータはすべての内部イベントをコンソールに記録します。
     * * `useHash`は、履歴の代わりにURLフラグメントを使用するロケーション戦略を有効にします。
     * API。
     * * `initialNavigation` は初期ナビゲーションを無効にします。
     * * `errorHandler` はカスタム エラー ハンドラーを提供します。
     * * `preloadingStrategy` はプリロード戦略を設定します (`PreloadAllModules` を参照)。
     * * `onSameUrlNavigation`は、ルータが現在のURLへのナビゲーションをどのように処理するかを設定します。
     * 詳細については `ExtraOptions` を参照してください。
     * * `paramsInheritanceStrategy`は、ルータがパラメータ、データ、解決されたデータをマージする方法を定義します。
     * 親ルートから子ルートへ。
     */
    静的 forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>;
    /**
     * すべてのルーターディレクティブとルートを登録するプロバイダーを含むモジュールを作成します。
     */
    静的 forChild(routes: Routes): ModuleWithProviders<RouterModule>;
}

'@angular/core' から NgModule をインポートします。
'@angular/common' から CommonModule をインポートします。

@Ngモジュール({
  宣言: [],
  輸入: [
    共通モジュール
  ]
})
クラス ServicesModule をエクスポートします { }

'@angular/core' から NgModule、ModuleWithProviders をインポートします。
'@angular/common' から CommonModule をインポートします。

@Ngモジュール()
クラス ServicesModule をエクスポートします { 
  静的 forRoot():ModuleWithProviders{
    戻る {
      ngModule: サービスモジュール、
      プロバイダー:[]
    }
  }
}

<mat-list-item class="container" [@item]="widerPriority" [ngClass]="{
  '優先度-通常':item.priority===3,
  '優先度-重要':item.priority===2,
  '優先度-緊急':item.priority===1
}"

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

<app-task-list *ngFor="リストのリストを作成" 
  クラス="リストコンテナ"
  アプリをドロップ可能="true"
  [dropTags]="['タスク項目','タスクリスト']"
  [dragEnterClass]="'ドラッグして入力'"
  [アプリドラッグ可能]="true"
  [dragTag]="'タスクリスト'"
  [draggedClass]="'drag-start'"
  [dragData]="リスト"
  (ドロップ)="handleMove($event,list)"
  [ngStyle]="{'order': list.order}"
  >

リスト = [
    {
      id: 1,
      名前:「ToDo」、
      順序: 1,
      タスク:
        {
          id: 1,
          説明: 「タスク 1: スターバックスに行ってコーヒーを買う」
          完了: true、
          優先度: 3,
          所有者：
            id: 1,
            名前:「張三」
            アバター: "avatars:svg-11"
          },
          期日: 新しい日付()、
          リマインダー: 新しい日付()
        },
        {
          id: 2,
          説明: 「タスク 1: 上司から割り当てられた PPT 課題を完了する」
          完了: 偽、
          優先度: 2,
          所有者：
            id: 2,
            名前:「李思」
            アバター: "avatars:svg-12"
          },
          dueDate: 新しい日付()
        }
      ]
    },
    {
      id: 2,
      名前:「進行中」、
      注文:2,
      タスク:
        {
          id: 1,
          説明: 「タスク 3: プロジェクト コード レビュー」、
          完了: 偽、
          優先度: 1、
          所有者：
            id: 1,
            名前: 「王武」、
            アバター: "avatars:svg-13"
          },
          dueDate: 新しい日付()
        },
        {
          id: 2,
          説明: 「タスク 1: プロジェクト計画を作成する」
          完了: 偽、
          優先度: 2,
          所有者：
            id: 2,
            名前:「李思」
            アバター: "avatars:svg-12"
          },
          dueDate: 新しい日付()
        }
      ]
    }
  ];

ハンドル移動(ソースデータ、ターゲットリスト){
    スイッチ (srcData.tag) {
      ケース 'タスク項目':
        console.log('アイテムを処理しています');
        壊す;
      ケース 'タスクリスト':
        console.log('処理リスト');
        srcList を srcData.data に格納します。
        srcList の順序を定数で指定します。
        srcList.order = targetList.order;
        ターゲットリストの順序 = tempOrder;
      デフォルト：
        壊す;
    }
  }