Как показать компонент внутри диалогового компонента Angular Material?

Question

Я хотел бы показать parentComponent, который генерирует диаграммы c3, внутри DialogModalComponent. Я вижу текст из parentComponent, когда открываю диалоговое окно, но он не показывает диаграмму c3. Как я могу показать диаграмму c3, созданную в родительском компоненте для отображения в диалоговом окне ModalComponent?

Код и пример приведены в стеке:

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

Answer 1

В вашем стеке произошла ошибка.
В вашем app.module измените на:

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

Теперь реальный вопрос. В родительском компоненте при создании графики вы выбираете div с идентификатором, как показано здесь:

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

Проблема в том, что при повторном использовании этого компонента генератор c3 попытается найти в вашем HTML идентификатор 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';

Пожалуйста, проверьте официальную документацию Угловой Материал конструкции

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

и в файле вашего компонента

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

Остальноесвязи в порядке.Надеюсь, что это решит вашу проблему Ура!