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