gridlist：

image.png

dialog：

image.png

//带有dialog的组件是需要在entry里面声明的
NewProjectComponent,
InviteComponent,
]
dialog组件的模板如下所示：
<form >
<h2 md-dialog-title>{{title}}</h2>
<div md-dialog-content class="dialog-style">
<md-input-container>
<input mdInput type="text" class="full-width" placeholder="项目名称">
</md-input-container>
<md-input-container>
<input mdInput type="text" class="full-width" placeholder="项目描述">
</md-input-container>
</div>
<div md-dialog-actions>
<button type="button" md-raised-button color="primary" (click)="onClick()">保存</button>
<button type="button" md-button md-dialog-close>关闭</button>
</div>
</form>
在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