搞一個可以共用的的彈窗模板
先弄個Materila Dialog 底

//DialogComponent
<h3 mat-dialog-title>彈窗標題</h3>
<mat-dialog-content>
  彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button mat-button [mat-dialog-close]="true">Install</button>
</mat-dialog-actions>

//day3PageComponent
export class Day3PageComponent {
  readonly dialog = inject(MatDialog);
  openDialog() {
    this.dialog.open(DialogComponent).afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

插入模板的由來 ?

前輩的概念
警告視窗傳入一兩句話沒啥複雜，弄個content + innerHtml + sanitizer

如果不是只有這樣呢?
放個模板吧

<button (click)="openDialog(dialogTemplate)">打開彈窗</button>

<ng-template #dialogTemplate>
  <h3 matDialogTitle>彈窗標題</h3>
  <mat-dialog-content>
    彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button mat-dialog-close>取消</button>
    <button mat-button [mat-dialog-close] (click)="onConfirm()">確認</button>
  </mat-dialog-actions>
</ng-template>

export class Day3PageComponent {
  readonly dialog = inject(MatDialog);

  openDialog(template: TemplateRef<any>) {
    this.dialog.open(template);
  }

}

?!結束了?!

分段插入模板

設計師想要特別沒有標題的彈跳視窗，工程師說不行 ? ((轉行算了

模板分段

<ng-template #headerTemplate>
  <h3 matDialogTitle>彈窗標題</h3>
</ng-template>

<ng-template #contentTemplate>
  <mat-dialog-content>
    彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容彈窗內容
  </mat-dialog-content>
</ng-template>

<ng-template #actionTemplate>
  <mat-dialog-actions>
    <button class="secondary" mat-dialog-close>取消</button>
    <button class="primary" [mat-dialog-close] (click)="onConfirm()">確認</button>
  </mat-dialog-actions>
</ng-template>

MatDialogConfig<Data>

export interface IDialogTemplate {
  headerTemplate?: TemplateRef<any>;
  contentTemplate?: TemplateRef<any>;
  actionTemplate?: TemplateRef<any>;
}

改寫DialogComponent + ngTemplateOutlet

export class Day3PageComponent {
  readonly dialog = inject(MatDialog);
  @ViewChild('headerTemplate') headerTemplate!: TemplateRef<any>;
  @ViewChild('contentTemplate') contentTemplate!: TemplateRef<any>;
  @ViewChild('actionTemplate') actionTemplate!: TemplateRef<any>;

  openDialog() {
    const templateConfig: MatDialogConfig<IDialogTemplate> = {
      data: {
        headerTemplate: this.headerTemplate,
        contentTemplate: this.contentTemplate,
        actionTemplate: this.actionTemplate,
      }
    }
    this.dialog.open(DialogComponent,
      templateConfig
    ).afterClosed;
  }

  onConfirm() {
    console.log('哇哈哈')
  }

}

@if(data.headerTemplate){
  <ng-container *ngTemplateOutlet="data.headerTemplate"></ng-container>
}
@if(data.contentTemplate){
  <ng-container *ngTemplateOutlet="data.contentTemplate"></ng-container>
}
@if(data.actionTemplate){
  <ng-container *ngTemplateOutlet="data.actionTemplate"></ng-container>
}

今天有github