为什么 Angular 中的 HTMLDialogElement 没有 showModal() 方法？

Question

当我写这篇文章时，MDN 表明HTMLDialogElement除 Internet Explorer 之外的所有浏览器都支持该功能。但奇怪的是，在使用它时，会出现一条警告，指出大多数浏览器不支持它，并将其标记为已弃用。这不是问题，直到我发现调用showModal()给了我错误：

类型上不存在属性“showModal”HTMLDialogElement

我错过了什么吗？

这是我的代码：

let elem: HTMLDialogElement = document.getElementById("dlg") as HTMLDialogElement;
elem.showModal(); // this line gives error

Answer 1

根据类型定义（lib.dom.d.ts），HTMLDialogElement没有方法showModal()。你可以强制转换elemtoany以使 TypeScript Transpiler 接受它：

(elem as any).showModal()

但是，您不应使用已弃用的 API。如果您将 Material 与 Angular 结合使用，则可以改用该MatDialog服务。