材料对话框不渲染组件？

Question

我有一个简单的组件：

@Component({
  selector: 'my-component',
  template: '<p>I am a simple component</p>',
})

如果我放置＆lt; my-component＆gt;＆lt;/my-component＆gt; 在我的应用程序的html中的某个地方，则如预期的那样，我会看到文本：“我是一个简单的组件： “ ...

但是，使用材料对话框...

...

  openDialog () {
    this.dialog.open(ModalComponent, { data: { some: 'data' } });
  }

...    


@Component({
  selector: 'modal',
  template: '<my-component></my-component>',
})
class ModalComponent {
  constructor (
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}

打开此对话框时，我会得到一个空白的对话框。并检查HTML，我基本上看到：

<mat-dialog-container ...(lots of attrs)>
  <modal>
    <my-component></my-component>
  </modal>
</mat-dialog-container>

为什么在此上下文中 my-component 不呈现？

Answer 1

这是Stackblitz的链接

在此示例中，组件在对话框中呈现。

将您的My-Component内容导入您的app.module文件。

我希望这就是你的意思吗？

这是一个更新的链接，为您的情况添加所有要共享模块的组件，请确保您正确导出它们。