angular material dialog應用

1. 打開彈窗的點擊事件

project.component.html

<button mat-icon-button class="action-button" (click)="editDialog(project)">
          <mat-icon>create</mat-icon>編輯
      </button>

<button mat-mini-fab color="warn" class="add-project" (click)="openDialog()">
  <mat-icon>add</mat-icon>
</button>

project.component.ts

import { Component, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material'; import { NewProjectComponent } from '../new-project/new-project.component'; @Component({ selector: 'app-project', templateUrl: './project.component.html', styleUrls: ['./project.component.scss'] }) export class ProjectComponent implements OnInit { projects=[ { "name":'企業協做平臺', "desc":'這是一個企業內部項目', "coverImg":'assets/img/covers/0.jpg' }, { "name":'員工管理平臺', "desc":'這是一個企業內部項目', "coverImg":'assets/img/covers/1.jpg' } ]; constructor(public dialog:MatDialog) { } ngOnInit() { } // 新建項目
 openDialog(){ const dialogRef = this.dialog.open(NewProjectComponent, { width: '250px' }); dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed',result); }); } // 編輯項目
 editDialog(data){ const dialogRef = this.dialog.open(NewProjectComponent,{ width:'250px', data:data }); dialogRef.afterClosed().subscribe(result=>{ console.log('The dialog was closed',result); }) } }

2. 彈窗

new-project.component.html

<h1 mat-dialog-title>新建項目</h1>
<div mat-dialog-content>
  <mat-form-field>
    <input matInput [(ngModel)]="project.name" placeholder="項目名稱">
  </mat-form-field>
  <mat-form-field>
      <input matInput [(ngModel)]="project.desc" placeholder="項目描述">
    </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-raised-button (click)="onNoClick()">關閉</button>
  <button mat-raised-button  [mat-dialog-close]="project"  cdkFocusInitial  color="primary">保存</button>
</div>

new-project.component.ts

import { Component, OnInit, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-new-project', templateUrl: './new-project.component.html', styles: [] }) export class NewProjectComponent implements OnInit { project:Object; constructor( public dialogRef:MatDialogRef<NewProjectComponent>, @Inject(MAT_DIALOG_DATA) public data ) { } ngOnInit() { this.project = this.data||{}; } onNoClick(){ this.dialogRef.close(); } }

3. 特別注意：new-project組件是一個服務。在project.module.ts中必須寫入entryComponent中，不然會報錯

import { NgModule } from '@angular/core'; import { ProjectComponent } from './project/project.component'; import { SharedModule } from '../shared/shared.module'; import { NewProjectComponent } from './new-project/new-project.component'; @NgModule({ imports: [ SharedModule ], declarations: [ProjectComponent, NewProjectComponent], entryComponents:[ NewProjectComponent ] }) export class ProjectModule { }