使用 Angular Material 和 Safari 从另一个对话框打开对话框

Question

请查看以下应用程序：

我正在尝试从另一个对话框中打开一个对话框。共享示例在 Chrome 中运行良好，但在 Safari 中不起作用。

如果您在 safari 中检查两个 console.log() 语句，结果看起来会有所不同：

Safari

第一个对话信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

第二个对话信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

Chrome

第一个对话信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

第二个对话信息：

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog2", disableClose: false, _afterOpen: Subject, …}

请注意，对于 Chrome，传递给对话框的 'id' 参数已正确获取，对于 Safari，我没有得到相同的行为，因此 Safari 不会打开第二个对话框面板。

Answer 1

那是因为 Safari 本身不支持 Web 动画 API，您必须安装 web-animations-js。下面的 GIF 展示了如何安装对 Stackblitz 的依赖：

如果画质有点模糊请见谅

并取消注释 polyfills.ts 中的这一行：

/** ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // <- Uncomment this line

最后，请不要将 unpkg 用于主题，因为它会从最新的 master 获取 CSS，并且可能会引入重大更改。相反，在 styles.css 中使用它如下：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Opening dialog from another dialog with Angular Material and Safari