Angular实现dialog对话框封装

Angular实现dialog对话框封装

为什么要封装？

对于Angular Material UI库中的dialog组件，实在不是很好用，所以打算简单封装一下啊。

直接代码吧。

封装dialog组件

1.创建一个dialog组件

2.dialog.component.html文件

<ng-template #dialog>
    <!-- 对话框投射内容 -->
    <ng-content></ng-content>
</ng-template>

3.dialog.component.scss文件

::ng-deep {
    .mat-dialog-container {
        padding: 14px !important;
        .mat-dialog-content {
            margin: 0 -14px !important;
            padding: 0 14px !important;
        }

        .mat-dialog-title {
            margin: -6px 0 8px !important;
        }