如何在 Angular Material 对话框组件中显示组件？

Question

我想展示在 DialogModalComponent 中生成 c3 图表的 parentComponent。当我打开对话框时，我可以看到来自 parentComponent 的文本，但它没有显示 c3 图表。如何显示在父组件中创建的 c3 图表以显示在 Dialog ModalComponent 中？

Answer 1

你的 stackblitz 出错了。
在您的 app.module 更改为：

import { MatDialogModule } from '@angular/material/dialog';

现在是真正的问题。在您的父组件中，在生成您的图形时，您选择了带有 id 的 div，如下所示：

var chart = c3.generate({
  bindto: '#barChart',
  ...
}

问题是：当重用这个组件时，c3 生成器会尝试在你 html 中找到一个 id barChart。原来是找到第一个已经出现的，而不是模态里面的新的。
要解决此问题，我认为 @ViewChild 可以提供帮助：

在parent.component.html中：
<div #barChart></div>

在parent.component.ts中：

export class ParentComponent implements OnInit {
  @ViewChild('barChart') barChart:ElementRef;
  ...
  createChart(){
    var chart = c3.generate({
    bindto: this.barChart.nativeElement,
    ...
  }

这样你的组件总能找到它自己的 barChart

Answer 2

没有 MatDialog 提供程序！

请检查您的app.module.ts导入语句是否有误。

import { MatDialogModule } from '@angular/material';

Please check the official documentation of Angular Material design

import {MatDialogModule} from '@angular/material/dialog';

并在您的组件文件中

import { MatDialog } from '@angular/material/dialog';

其余连接正常。希望这会解决你的问题干杯！

如何在 Angular Material 对话框组件中显示组件？

How to show a component inside Angular Material dialog component?

angular

typescript

c3.js