angular5+webpack使用Dialog遇到的坑

趁热乎来写一下关于angular5+webpack3使用angular material组件Dialog遇到的坑

1.如果需要【弹出框】交互数据，必须在同一个typeScript注册组件，这样才能接收主组件传参。如下：

导入包：

import { OnDestroy,OnInit,Component,Input,Inject } from'@angular/core';

import { MatDialog,MAT_DIALOG_DATA,MatDialogRef }from '@angular/material';

构造方法：

public dialog :MatDialog,

传数据方法：

let dialogRef=this.dialog.open(DialogComponent,{

width:'640px',

data:{name:'aName'},

disableClose:true,

});

dialogRef.afterClosed().subscribe(result=>{

console.log(result);

})

接收数据方法，在弹出框组件：

constructor(

@Inject(MAT_DIALOG_DATA)public data:any,

){}

2.(可选)如果在Module里面做全局设置，（以下是设置点击弹出框以外的地方会隐藏弹出框），这里需要单独声明一个providers。不然会出现弹出框没有模态。啊啊啊！（亲测）

在declarations、providers、entryComponents声明弹出框组件就OK了。以上

------------------------------------------------完-------------------------------------------------