Angular 项目列表页

$ ng g m project

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

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

一、project相关组件

$ ng g c project/project-list 【项目列表组件】

$ ng g c project/project-item 【卡片组件】

$ ng g c project/new-project【新建项目组件，新建项目，或者修改项目时候会有一个对话框。】

$ ng g c project/invite 【邀请组件，邀请其它成员的对话框。】

此时这些组件都会在declarations中。

declarations: [ProjectListComponent,ProjectItemComponent,NewProjectComponent,InviteComponent],

我们希望对话框组件出现在entryComponent中。

@NgModule({
  declarations: [ProjectListComponent,ProjectItemComponent],entryComponents:[NewProjectComponent,imports: [
    CommonModule
  ]
})

二、ProjectList

<app-project-item *ngFor="let project of projects" [item]="project">
</app-project-item>
<button mad-fab type="button" (click)="openNewProjectDialog()">
  <mat-icon>add</mat-icon>
</button>