角度材料对话框面板类不会更新

Question

我正在使用 Angular 材质对话框，并且正在尝试将背景设置为自定义颜色。

这个问题已经被问了好几次了，我已经尝试应用答案，但它似乎不起作用。具体来说，对话容器的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 检查元素

<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'));
  }