为什么 Angular Material 对话框组件没有显示在 Google Chrome 中？

Question

该对话框在 Firefox 中运行良好。在 Chrome 中，点击事件只显示一个没有内容或按钮的小空对话框。当我遇到问题时，我正在处理 this 示例。

对话框组件：

@Component({
selector: 'dialog',
template: `
        <h1 md-dialog-title class="primary-color">hey title</h1>
        <md-dialog-content class="accent-color">
          hey this is the content of the dialog
        </md-dialog-content>
        <md-dialog-actions>
          <button md-raised-button color="primary" md-dialog-close>
            close button
          </button>  
        </md-dialog-actions>
`
})

AppComponent html:

<div>
  <button md-raised-button color="primary" (click)="openDialog()">
    Example Dialog - Click Me!
  </button>
</div>

AppComponent 函数：

constructor(public dialog: MdDialog) {}

openDialog() {
  this.dialog.open(DialogComponent);}

我需要做些什么才能让它在 Google Chrome 浏览器中运行吗？

Answer 1

当我从 DialogComponent 中删除选择器时，问题停止了：

selector: 'dialog',

Answer 2

有一个非常相似的问题，在将我的选择器名称从 'dialog' 更改为 'dialog-box.' 后得到修复不确定具体细节，但我假设 Chrome 包含一些 'dialog' 选择器，如果您使用 'dialog' 作为选择器名称，它将被引用。

为什么 Angular Material 对话框组件没有显示在 Google Chrome 中？

Why is Angular Material Dialog component not showing in Google Chrome?

google-chrome

angular-material2

angular