使用Angular Material和Safari

Question

请查看以下应用：

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

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

铬

第一个对话框信息：

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

第二个对话框信息：

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

请注意，对于Chrome，＆＃39; id＆＃39;传递给对话框的参数被正确选取，对于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

这是support status for Web Animations API。

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

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

Updated demo