Angular 项目列表页

发布时间：2020-12-17 07:04:00 所属栏目：安全来源：网络整理

导读：$ ng g m project 功能：项目列表显示，增加，修改，删除项目。邀请其它人员加入项目。单一性原则：希望搭建多个组件，每个组件负责自己的功能。一、project相关组件 $ ng g c project/project-list 【项目列表组件】 $ ng g c project/project-item 【卡

$ 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!