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

Question

请查看以下应用程序：

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

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

苹果浏览器

第一个对话框信息：

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

第二个对话框信息：

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

铬合金

第一个对话框信息：

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 Animations 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 作为主题，因为它会从最新的 CSS 中获取master并可能引入重大更改。相反，styles.css按如下方式使用它：

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