angular - 使用 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, …}

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 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