angular material（三）组件介绍

gridlist：

image.png

dialog：

image.png

带有dialog的组件是需要在entry里面声明的，所以我们在project.module.ts 模块里面声明
entryComponents:[

//带有dialog的组件是需要在entry里面声明的
NewProjectComponent,
InviteComponent,
]
dialog组件的模板如下所示：

{{title}}

保存
关闭

在dialog的调用组件中写一个方法：openNewProjectDialog（）

在使用 dialog的时候在构造方法中需要注入一个MdDialog

image.png

调用下面的方法可以创建一个dialog，并可通过下方的设置参数 设置 dialog的 大小以及 位置 还可以传递数据。
openNewProjectDialog(){
//控制dialog的大小
/this.dialog.open(NewProjectComponent,{width:'100px',height:'100px'});/
//控制 dialog的位置
/this.dialog.open(NewProjectComponent,{position:{left:'0',top:'0'}});/
//传递数据
const dialogRef= this.dialog.open(NewProjectComponent,{data:{title:'新增项目'}})
dialogRef.afterClosed().subscribe(
result=>{
console.log('我接受到了'+result);
this.projects=[... this.projects,{id:3,name:'一个新的项目',desc:'这是一个新项目',coverImg:'assets/img/covers/8.jpg'}]
this.cd.markForCheck();
});
}
同样的，我们需要在dialog内部接收到传入的数据

image.png

同样的当我们在dialog 关闭按钮之后需要回传数据给调用界面，可以分别给dialog组件 和 调用界面加入如下的代码：
dialog组件加入如下：
onClick(){
this.dialogRef.close('i receive your message ');
}
调用界面加入如下：

image.png