为什么Angular Material Dialog组件未在Google Chrome中显示？

Question

该对话框在Firefox中正常工作.在Chrome中,click事件只显示一个没有内容或按钮的小空对话框.当我遇到这个问题时,我正在研究这个例子.

DialogComponent:

@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

有一个非常相似的问题，在将我的选择器名称从“对话框”更改为“对话框”后已修复。不确定具体细节，但我假设 Chrome 包含一些“对话框”选择器，如果您使用“对话框”作为选择器名称，它们将被引用。