如何附加创建的零部件以在角度6中查看

Question

我目前在这样的对话框中创建一个动态组件：

dialog.component.ts

@Component({
    selector: 'm-dialog',
    templateUrl: './dialog.component.html',
})
export class DialogComponent {

    @ViewChild('target', { read: ViewContainerRef }) vcRef: ViewContainerRef;
    componentRef: ComponentRef<any>;

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

    ngOnInit() {
        if(this.data.component) {
            const factory = this.resolver.resolveComponentFactory(this.data.component);
            this.componentRef = this.vcRef.createComponent(factory);
        }
    }

    ngOnDestroy() {
        if (this.componentRef) {
            this.componentRef.destroy();
        }
    }
}

我从上层组件通过data.componet：

data-quality.component.html

<m-dialog-card [compRef]="this.barChartRef">
    <m-bar-chart #barChart></m-bar-chart>
</m-dialog-card>

data-quality.component.ts

@Component({
  selector: 'm-data-quality',
  templateUrl: './data-quality.component.html',
  styleUrls: ['./data-quality.component.scss']
})
export class DataQualityComponent implements OnInit {

  public barChartRef = BarChartComponent;

  @ViewChild('barChart') barChart: BarChartComponent;

  constructor() { }

  ngOnInit() {
  }

}

当我的BarChartComponent请求后端加载数据时，每次解析程序创建BarCharComponent的新实例时，该组件都会请求后端。当然，这是一个坏习惯。

因此，我创建了一个@ViewChild('barChart') barChart: BarChartComponent;而不是BarChartComponent来发送到对话框，但这没用。

有什么解决方案可以将创建的组件附加到视图中，而不是动态创建组件？

注意：我在对话框和数据质量之间有一个中间组成部分，但我试图使问题简短一些！