[转]Angular4 引用 material dialog时自定义对话框/deep/.mat-dialog-container

本文转自：https://www.geek-share.com/detail/2724218851.html

• 引用 material dialog 方法　官方文档

• 自定义弹框内容后的结果

  

dialog html

<div style="background-color: #4eaee1">
我是内容
</div>

啊嘞，奇怪了，我并没哟设置　padding值，但是却有padding

• 查看material dialog 组件源码(dialog.es5.js)，看看发现了啥

MatDialogContainer.decorators = [
{ type: Component, args: [{selector: 'mat-dialog-container',
template: "<ng-template cdkPortalHost></ng-template>",
styles: [".mat-dialog-container{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:block;padding:24px;border-radius:2px;"],
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,

那啥从源码发现了dialog的容器布局中添加　.mat-dialog-container padding:24px

所以dialog布局造成有边距

• 方案 自定义样式

/deep/.mat-dialog-container {
padding: 0px;
}

注意点 class名和组件里相同，前面加 /deep/，大概意思是会深入组件内对有该class的组件设置样式，这样会覆盖组件内的　padding

结果

举一反三：那么若是在angular中引入其他第三方组件，但又不想用它的样式则可以通过这样的方案去改变它的样式

MatDialog　其他属性设置探索

{
width: '250px',  //宽
height: '100px',  //高
position: {top: '30px'}, //距离浏览器上边距(top,bottom,left,right)
disableClose: true,   //点击对话框外不消失
// hasBackdrop: true,
// backdropClass: `btn-default`,
// panelClass: `btn-default`,
data: { content: response.msg} //往对话框里传参数
}

主要属性设置可以看源码中的 dialog-config.d.ts 文件

--------------------- 本文来自 遗忘了的自己 的CSDN 博客 ，全文地址请点击：https://www.geek-share.com/detail/2724218851.html?utm_source=copy