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了。以上

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