调用动态组件时出现空白页面 angular 9

Question

我尝试从另一个组件调用动态组件，但显示的是空白页面

这是动态 component.ts :

@Component({

selector: 'app-draw-linechart',
templateUrl: './draw-linechart.component.html',
styleUrls: ['./draw-linechart.component.css']
})
export class DrawLinechartComponent implements OnInit {
 constructor(private productservice: ProductService) {}

ngOnInit() {
     this.PrepareData(); }     
PrepareData() {
  this.productservice.getProductsData(this.productHistoric).subscribe((data) => {
     this.historicproducts = data;
     console.log("historic products", this.historicproducts)
  });}

动态component.html：

 <div class="container">
<mat-grid-list cols="1" rows="2" rowHeight="100px"  >
 <mat-grid-tile>
   <mat-card class="dashboard-card">
    <mat-card-header>
      <mat-card-title>
        Line chart
      </mat-card-title>
    </mat-card-header>
  <mat-card-content class="dashboard-card-content">
    <button mat-raised-button color="warn" (click)="prepareData()">Add Line chart</button>
  </mat-card-content>
</mat-card>

这是我调用动态组件的另一个组件：

export class LineChartComponent implements OnInit{
constructor(private componentFactoryResolver:ComponentFactoryResolver,private vf:ViewContainerRef){}
...
OnSubmit(){
 this.createComponent();}

createComponent(){
 let resolver = this.componentFactoryResolver.resolveComponentFactory(DrawLinechartComponent);
 this.vf.createComponent(resolver);

} 然后我在 module.ts:

的 entryComponent 中添加了动态组件

entryComponents:[DrawLinechartComponent]

在控制台中我得到了正确的数据但是我有一个空白页面（我不知道为什么它不读取 html 代码）

Answer 1

首先，创建一个指令，您可以将此指令用于您希望成为动态组件容器的任何元素：

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ad-host]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

在您的模板中：

<ng-template ad-host></ng-template>

在您的组件中：

@ViewChild(AdDirective, {static: true}) adHost: AdDirective;

然后在你的函数中：

const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);

现在您的组件将在 ng-template 标记中创建。

您可以在angular docs

中查看详细示例

调用动态组件时出现空白页面 angular 9

having an empty page while calling a dynamic component angular 9

angular

angular-dynamic-components