新建一个任务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里面内容不去管。