角度材质对话框panelClass将不会更新

Question

我正在使用一个角度材质对话框，并且我试图使背景成为一种自定义的颜色。

这个问题已经被问了很多次了，我试着回答这个问题，但它似乎不起作用。具体地说，对话框容器的panelClass似乎没有更新。下面是打开对话框的组件、_theming.scss文件和HTML元素

import { Component, OnInit} from '@angular/core';
import { AuthService } from 'src/app/AuthenticationPackage/core/auth.service'
import { MatDialog, MatDialogConfig } from '@angular/material';
import { FactiondialogComponent } from './factiondialog/factiondialog.component';



@Component({
  selector: 'app-factions2',
  templateUrl: './factions2.component.html',
  styleUrls: ['./factions2.component.scss']
})
export class Factions2Component implements OnInit {


  constructor( public authService: AuthService,
            public dialog: MatDialog ) { }

  ngOnInit(){  }



  openDialog(faction): void{
    const dialogConfig = new MatDialogConfig()

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {faction};
    dialogConfig.panelClass = ".faction-dialog";


    const dialogRef = this.dialog.open(FactiondialogComponent, dialogConfig)

        dialogRef.afterClosed().subscribe(result => {
            console.log("dialog closed");
        });
}
}

_theming.scss部分：

@mixin mat-dialog-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .faction-dialog{
    background-color:rgb(28, 31, 32)
}

  .mat-dialog-container {
    @include _mat-theme-elevation(24, $theme);
    background: mat-color($background, dialog);
    color: mat-color($foreground, text);
  }
}

@mixin mat-dialog-typography($config) {
  .mat-dialog-title {
    @include mat-typography-level-to-styles($config, title);
  }
}

这是生成的标记，但它不包括我的自定义类。

<mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c12-2 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform: none;"><!--bindings={
  "ng-reflect-portal": ""
}--><app-factiondialog _nghost-lda-c13="" class="ng-star-inserted"><div _ngcontent-lda-c13="" class="dialogCard"><h2 _ngcontent-lda-c13="" class="mat-dialog-title">The Harpers</h2><mat-dialog-content _ngcontent-lda-c13="" class="mat-typography mat-dialog-content"><p _ngcontent-lda-c13="">
SOME CONTENT THAT DOESNT MATTER TO THE EXAMPLE
            </p></mat-dialog-content><mat-dialog-actions _ngcontent-lda-c13="" align="end" class="mat-dialog-actions"><button _ngcontent-lda-c13="" mat-button="" mat-dialog-close="" class="mat-button mat-button-base" ng-reflect-dialog-result="" type="button"><span class="mat-button-wrapper">Close</span><div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button></mat-dialog-actions></div></app-factiondialog></mat-dialog-container>

我相信上节应该是这样说的：

<mat-dialog-container aria-modal="true" class="mat-dialog-container faction-dialog ng-tns-c12-2 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform: none;">

但我不确定，因为我还没让它起作用。我已经遵循了文档：

https://material.angular.io/components/dialog/api#MatDialogConfig

我不确定是否有什么我需要添加到我的应用程序模块或其他地方。

根据可汗先生的请求：

faction2.component.ts：

openDialog(faction): void{



    const dialogRef = this.dialog.open(FactiondialogComponent, {panelClass: 'faction-dialog'})

        dialogRef.afterClosed().subscribe(result => {
            console.log("dialog closed");
        });
}

模式打开的屏幕：

​

HTML Inspect元素

<mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c12-4 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-2" role="dialog" style="transform: none;"><!--bindings={
  "ng-reflect-portal": ""
}--><app-factiondialog _nghost-yis-c13="" class="ng-star-inserted"><div _ngcontent-yis-c13="" class="dialogCard"><h2 _ngcontent-yis-c13="" class="mat-dialog-title"></h2><mat-dialog-content _ngcontent-yis-c13="" class="mat-typography mat-dialog-content"><p _ngcontent-yis-c13=""></p></mat-dialog-content><mat-dialog-actions _ngcontent-yis-c13="" align="end" class="mat-dialog-actions"><button _ngcontent-yis-c13="" mat-button="" mat-dialog-close="" class="mat-button mat-button-base" ng-reflect-dialog-result=""><span class="mat-button-wrapper">Close</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button></mat-dialog-actions></div></app-factiondialog></mat-dialog-container>

Answer 1

如果您想添加您自己的自定义类来设置材质模式的样式，那么首先将您的自定义类传递到您的模式中的panelClass键，方法如下：

this.dialogRef = this.dialog.open(AddCustomComponent,{
    panelClass: 'custom-dialog-container', //======> pass your class name
});
this.dialogRef.afterClosed();

一旦完成，你所要做的就是通过使用你的类来设计你的模式，其他的模型不会受到影响。例如，您可以通过这种方式删除填充和边距。

/*Material Dialog Custom Css*/ 
.custom-dialog-container .mat-dialog-container{
    padding: 0;
}

.custom-dialog-container .mat-dialog-container .mat-dialog-content{
    margin: 0;
}
/*---------------------------*/ 

Answer 2

上面的回答很棒，但我只是想通过说明MatDialogConfig也可以通过一些配置对象传递来扩展它。

例如，我为我的场景传入了自定义类SingleViewDialog，其中my-custom-maximize padding覆盖被添加到我们的mat-dialog.scss覆盖文件中：

​

export interface SingleViewDialog {
  examUID: string;
  examData: TrendOctExam;
  layoutMode: Layout;  
}

public launchSingleView(examUID: string, examData: TrendOctExam) {
    const config: MatDialogConfig<SingleViewDialog> = {};
    config.hasBackdrop = true;
    config.disableClose = false;
    config.panelClass = 'my-custom-maximize';
    const mode: Layout = 'volume2d';
    config.data = { examUID, examData, layoutMode: mode};
    
    const dialogRef = this.matDialog.open(OCTThreeDSingleComponent, config );   //*** INJECT HERE ***
    
    dialogRef.afterClosed().subscribe(_ => this.viewStateService.updateLayoutMode('glaucoma'));
  }

​