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

Question

请查看以下应用程序：

https://stackblitz.com/edit/angular-1qxhep

我正在尝试从另一个对话框中打开一个对话框。共享示例在 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

这是Web Animations API 的支持状态。

最后，请不要使用 unpkg 进行主题化，因为它会获取最新的 CSS，master并且可能会引入重大更改。相反，styles.css按如下方式使用它：

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

更新的演示