Angular 項目列表頁

$ ng g m project

功能：項目列表顯示，增長，修改，刪除項目。邀請其它人員加入項目。

單一性原則：但願搭建多個組件，每一個組件負責本身的功能。

1、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中。

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectItemComponent } from './project-item/project-item.component';
import { NewProjectComponent } from './new-project/new-project.component';
import { InviteComponent } from './invite/invite.component';
import { ProjectRoutingModule } from './project-routing.module';

@NgModule({
  declarations: [ProjectListComponent, ProjectItemComponent, NewProjectComponent, InviteComponent],
  entryComponents: [NewProjectComponent, InviteComponent],
  imports: [

    SharedModule,
    ProjectRoutingModule
  ]
})
export class ProjectModule { }

 

2、ProjectList

循環輸出每一個項目的item，有一個新增項目item的快速響應的按鈕。

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

 project-item裏的內容應該是projectList項目決定的。

export class ProjectListComponent implements OnInit {
  projects = [
    {
      "name": "企業協做平臺",
      "desc": "這是一個企業內部項目",
      "coverImg": "assets/images/covers/0.jpg"
    },
    {
      "name": "自動化測試項目",
      "desc": "這是一個企業內部項目",
      "coverImg": "assets/images/covers/2.jpg"
    }

  ];
  constructor(private dialog: MatDialog) { }

  ngOnInit() {
  }

  openNewProjectDialog() {
    this.dialog.open(NewProjectComponent);
  }
} 

3、ProjectItem

應該是卡片類型的。

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>每日佳句</mat-card-title>

  </mat-card-header>
  <img mat-card-image [src]="item.coverImg" alt="項目封面">
  <mat-card-content>
    {{item.desc}}
  </mat-card-content>
  <mat-card-actions>
    <button>
      <mat-icon>note</mat-icon>
      <span>編輯</span>
    </button>
    <button>
      <mat-icon>group_add</mat-icon>
      <span>邀請</span>
    </button>
    <button>
      <mat-icon>delete</mat-icon>
      <span>刪除</span>
    </button>
  </mat-card-actions>
</mat-card>

一、邀請

但願這個組件越笨越好，只顯示，不作邏輯處理。

因此projectItem中點擊 邀請 按鈕，只負責把事件發射出去，讓父組件知道，不作處理。

<button mat-button type="button" (click)="onInviteClick()">
      <mat-icon>group_add</mat-icon>
      <span>邀請</span>
</button>


 @Output() onInvite = new EventEmitter<void>();
  onInviteClick() {
    this.onInvite.emit();
  }

二、編輯

編輯和新建共用一套組件。

ListItem把編輯事件發射出去。

<button mat-button type="button" (click)="onEditClick()">
      <mat-icon>note</mat-icon>
      <span>編輯</span>
</button>

@Output() onEdit = new EventEmitter<void>();
onEditClick() {
    this.onEdit.emit();
}

ProjectList獲得編輯事件後lauch新建項目組件，傳入title。

<app-project-item *ngFor="let project of projects" [item]="project"
class="card"
(onInvite)="lauchInviteDialog()"
(onEdit)="lauchUpdateDialog()">
</app-project-item>

  lauchUpdateDialog() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      data: { title: '編輯項目' }
    });
  }

NewProject組件中處理新建和編輯。

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { OverlayContainer } from '@angular/cdk/overlay';

@Component({
  selector: 'app-new-project',
  templateUrl: './new-project.component.html',
  styleUrls: ['./new-project.component.scss']
})
export class NewProjectComponent implements OnInit {
  title = '';
  theme: string = 'myapp-dark-theme';
  constructor(@Inject(MAT_DIALOG_DATA) private data: any,
    public dialogRef: MatDialogRef<NewProjectComponent>,
    private oc: OverlayContainer) { }


  ngOnInit() {
    console.log(JSON.stringify(this.data));
    this.title = this.data.title;
    // this.oc.themeClass = this.data.dark ? 'myapp-dark-theme' : 'null';
    this.oc.getContainerElement().classList.add(this.theme);
  }
  onSave() {
    this.dialogRef.close('I received your message');
  }
}

View Code

3，刪除

前面過程同樣，在Project List中lauch確認對話框

<app-project-item *ngFor="let project of projects" [item]="project"
class="card"
(onInvite)="lauchInviteDialog()"
(onEdit)="lauchUpdateDialog()"
(onDelete)="lauchConfimDialog()">
</app-project-item>


  lauchConfimDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: '編輯項目', content: '您確認刪除該項目嗎？' }
    });
  } 

3、路由

  {
    path: '', redirectTo: '/login', pathMatch: 'full'
  },
  {
    path:'login',loadChildren:'./login/login.module#LoginModule'
  },
  {
    path:'project',loadChildren:'./project/project.module#ProjectModule'
  }
];

4、NewProject

<form>
  <h2 md-dialog-title>新建項目</h2>
  <div mat-dialog-content>
    <mat-form-field class="example-full-width" class="full-width">
      <input type="text" matInput placeholder="您的email" style="text-align: right">
    </mat-form-field>
    <mat-form-field class="example-full-width" class="full-width">
      <input type="password" matInput placeholder="您的密碼" style="text-align: right">
    </mat-form-field>
  </div>
  <div mat-dialog-actions>
    <button type="button" mat-raised-button color="primary">保存</button>
    <button type="button" mat-button mat-dialog-close>關閉</button>
  </div>
</form>

 

5、Invite

用AutoComplete完成邀請組員的佈局。

<form>
  <h2 md-dialog-title>邀請組員：</h2>
  <div mat-dialog-content>
    <mat-form-field class="example-full-width" class="full-width">
      <input type="text" matInput placeholder="組員姓名" [matAutocomplete]="autoMembers" >
      <mat-autocomplete #autoMembers="matAutocomplete" [displayWith]="displayUser">
        <mat-option *ngFor="let option of filteredOptions" [value]="option">
          {{option.name}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

  </div>
  <div mat-dialog-actions>
    <button type="button" mat-raised-button color="primary" (click)="onSave()">保存</button>
    <button type="button" mat-button mat-dialog-close>關閉</button>
  </div>
</form>

View Code

  displayUser(user: { id: string; name: string }) {
    return user ? user.name : ''
  }

但願這個組件越笨越好，只顯示，不作邏輯處理，涉及邏輯了邏輯代碼會很是分散。調試的時候更改的地方會很是多。

因此projectItem中點擊 邀請 按鈕，只負責把事件發射出去，讓父組件知道，不作處理。

因此projectList來處理邀請事件，調起Invite組件。

  lauchInviteDialog(){
    const dialogRef = this.dialog.open(InviteComponent);
  }