angular material dialog应用

1. 打开弹窗的点击事件

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

ponent.ts

import { Component, OnInit } from '@angular/core';import { MatDialog } from '@angular/material';import { NewProjectComponent } from '../new-project/new-ponent';@Component({selector: 'app-project',templateUrl: './ponent.html',styleUrls: ['./ponent.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-ponent.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-ponent.ts

import { Component, OnInit, Inject } from '@angular/core';import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';@Component({selector: 'app-new-project',templateUrl: './new-ponent.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/ponent';import { SharedModule } from '../shared/shared.module';import { NewProjectComponent } from './new-project/new-ponent';@NgModule({imports: [SharedModule],declarations: [ProjectComponent, NewProjectComponent],entryComponents:[NewProjectComponent]})export class ProjectModule { }