Angular 6组件作为对话框(角度材料dialogRef)和本身同时存在.可能吗?

Question

我有一个组件，它本身可以正常工作，但不能作为对话框工作。

当我使用 DI 注入对话框引用并MAT_DIALOG_DATA

constructor(
public dialogRef: MatDialogRef<ChannelsComponent>,   
@Inject(MAT_DIALOG_DATA) private data: any
) { }

它仅作为对话框工作，但会自行停止工作。当我尝试在没有对话框的情况下渲染此组件时，我得到：

静态注入器错误(应用模块(

因此，它可以工作，但只能扮演一个角色 - 要么单独作为组件，要么作为对话框，但不能同时使用。

问题是：我们可以同时使用与对话框相同的 Angular 组件和单独使用(没有对话框(吗？

更新：

简化版本：

https://stackblitz.com/edit/angular-kg32ui - 仅用作对话框，如果单击菜单"频道"则不起作用

https://stackblitz.com/edit/angular-sr9b8h - 用作组件和对话框，但不向对话框提供数据

"channels.component.ts"中唯一的区别是第一个版本将这些服务注入到构造函数中：

constructor(
public dialogRef: MatDialogRef<ChannelsComponent>,
@Inject(MAT_DIALOG_DATA) private data: any
) { }

Answer 1

添加这些依赖项时，组件仅用作对话框的原因是，仅当组件作为对话框打开时，才会注入它们。当在没有对话框的情况下使用组件时，它找不到dialogRef是可以理解的。

为了解决这个问题，我建议打开一个ng-template作为对话框内容。

为此，请在 html 模板中创建一个ng-template：

<ng-template #dialog>
<h1>Dialog content!</h1>
</ng-template>

创建模板后，您可以使用ViewChild装饰器从组件访问它：

@ViewChild('dialog') template: TemplateRef<HTMLElement>;

您也可以像打开任何常用对话框一样打开它：

this.dialogRef = this.dialog.open(this.template);

您可以在此处查看工作示例： https://stackblitz.com/angular/nnorporgbvx