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

Question

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

Answer 1

您的堆栈闪电战中存在错误。
在您的 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';

请查看Angular Material design的官方文档

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

并在您的组件文件中

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

其余的连接很好。 希望这能解决你的问题干杯！