通过 angular5 中的 innerHtml 加载组件

Question

在我的应用程序中有 9 个小部件，每个小部件都有一个缩放选项。 为了显示缩放选项，创建了通用缩放组件来显示缩放组件。

单击缩放选项时，所选组件名称传递给缩放组件并创建 html 标签以及组件名称，并尝试通过 innerHtml 显示组件，但组件未出现在缩放组件中。

尝试使用 mat-progress-bar 静态 html

缩放组件.html

<div  style="border:2px solid green" #dataContainer></div>

zoom-component.component.ts

export class ProjectDetailsComponent implements OnInit {
  @ViewChild('dataContainer') dataContainer: ElementRef;
ngOnInit() {
    this.widget = "<mat-progress-bar></mat-progress-bar>";
    this.dataContainer.nativeElement.innerHTML = this.widget;
}
}

通过直接innerHTML通过错误

<div [innerHTML]="{{widget}}" style="border:2px solid green"></div>

解析器错误：在 [{{widget}}] 的第 0 列处需要表达式的位置得到插值 ({{}})

Answer 1

第一个问题它的语法错误，因为你得到的错误是：

解析器错误：在 [{{widget}}] 的第 0 列处需要表达式的位置得到插值 ({{}})

更改自：

[innerHTML]="{{widget}}"

到

[innerHTML]="widget"

第二个问题：要动态加载组件，您不能使用 innerHtml ，您应该使用componentFactoryResolver