Angular 调用动态组件时有一个空页

我试图从另一个组件调用动态组件，但它显示了一个空页面

这是动态组件。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)
  });}

动态组件.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>

} 然后我在module.ts的entryComponent中添加了动态组件：

entryComponents:[DrawLinechartComponent]

---

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

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

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);

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

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

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

在模板中：

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

然后在你的函数中：

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

现在，将在ng模板标记中创建组件

---

您可以在

中看到一个详细的示例。首先，创建一个指令，您可以将该指令用于任何要成为动态组件容器的元素：

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);

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

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

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

在模板中：

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

然后在你的函数中：

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

现在，将在ng模板标记中创建组件

---

您可以在

中看到一个详细的示例，您是否有主机将组件放入其中？您是否有主机将组件放入其中？这是一个很好的解决方案，但我的问题是，在组件中，我必须将动态组件称为对话表单，因此现在使用您的解决方案，动态组件将出现在表单中！这是我的html

。。。提交

oh。如果要打开对话框，不需要手动处理组件的创建。mat对话框为您处理它。事实上，我希望当我在其他组件中单击submit时，动态组件出现OK只需在父组件中放入，然后当用户提交并关闭对话框时，加载动态组件；你的动态模板中的任何hteml都会被放置在其中，因此无论它在哪里，动态组件都会加载到那里。这是一个很好的解决方案，但我的问题是我在组件中，我必须将动态组件称为对话表单，因此现在使用你的解决方案，动态组件会出现在表单中！这是我的html

。。。提交

oh。如果要打开对话框，不需要手动处理组件的创建。mat对话框为您处理它。事实上，我希望当我在其他组件中单击submit时，动态组件出现OK只需在父组件中放入，然后当用户提交并关闭对话框时，加载动态组件；您在动态模板中拥有的任何hteml都将放置在其中，因此无论它位于何处，动态组件都将加载到其中