Question

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

代码和示例在stackblitz中：

https://stackblitz.com/github/no9600hp/c3js_n_tabulator/tree/demo-for-example

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材料设计的官方文档

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

以及您的组件文件

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

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

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

2 个答案: