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

本文转自：https://blog.csdn.net/qq_24078843/article/details/78560556

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24078843/article/details/78560556

• 引用 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://blog.csdn.net/qq_24078843/article/details/78560556?utm_source=copy