Angular 任务列表页

新建一个任务Module

$ ng g m task

功能：项目列表显示，增加，修改，删除项目。邀请其它人员加入项目。

单一性原则：希望搭建多个组件，每个组件负责自己的功能。

一、task相关组件 

$ ng g c task/task-home

$ ng g c task/task-list

$ ng g c task/task-item

$ ng g c task/task-header

三、TaskHome

<div class="task-list">
  <app-task-list *ngFor="let list of lists" class="list-container">
    <app-task-header> </app-task-header>
    <app-task-item *ngFor="let task of list.tasks"> </app-task-item>
  </app-task-list>
</div>

<button
  class="ab-buttonmad-fab fab-button"
  mat-fab
  type="button"
  (click)="openNewProjectDialog()"
>
  <mat-icon>add</mat-icon>
</button>

四、TaskList

app-task-list组件里面是可以放内容的。

<mat-list>
  <ng-content>
  </ng-content>
</mat-list>

list里面内容不去管。

五、Header