Angular Universal MatDialog显示为空，按钮不起作用

Question

我已经将一个Angular Material 5应用程序移植到Angular Universal上，而且我正在使用MatDialog的间歇性问题。当它打开时，没有标题或内容。仅显示“确定”和“取消”按钮，它们不起作用。

我正在使用服务来创建对话框。这是代码。

import { Observable } from 'rxjs/Observable';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { Injectable } from '@angular/core';

import { AppConfirmComponent } from './app-confirm.component';

@Injectable()
export class AppConfirmService {

  constructor(private dialogRef: MatDialog) { }

  public confirm(title: string, message: string, id: string): Observable<boolean> {
    const idCancel = id + '-cancel';
    let dialogRef: MatDialogRef<AppConfirmComponent>;
    dialogRef = this.dialogRef.open(AppConfirmComponent, {
      width: '300px',
      disableClose: true,
      data: {title, message, id, idCancel}
    });
    return dialogRef.afterClosed();
  }
}

和组件：

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-confirm',
  template: `<h1 matDialogTitle>{{ data.title }}</h1>
    <div mat-dialog-content>{{ data.message }}</div>
    <div mat-dialog-actions>
      <button id="{{ data.id }}" type="button" mat-raised-button color="primary"
        (click)="dialogRef.close(true)">OK</button> &nbsp;
      <span fxFlex></span>
      <button id="{{ data.idCancel }}" type="button" color="accent" mat-raised-button
        (click)="dialogRef.close(false)">Cancel</button>
    </div>`,
})
export class AppConfirmComponent {
  constructor(
    public dialogRef: MatDialogRef<AppConfirmComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}

Answer 1

看来这个问题是由于调用：

this.changeRef.detectChanges();

更新：经过进一步调查，我发现尝试将对话框创建为服务会导致问题。如果我在使用它的组件中创建对话框，则没有问题。

Answer 2

我遇到了同样的问题：Angular Material不支持服务器端渲染。 link1

jelbourn在2017年10月25日发表评论link2：我们目前还没有计划在服务器上支持基于叠加层的组件渲染（对话框，菜单等）。对于绝大多数情况，这些组件仅在响应用户交互时呈现