在angular5中通过innerHtml加载组件

Question

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

单击缩放选项时，选择的组件名称传递给缩放组件，并与组件名称一起创建 html 标记，并尝试通过 innerHtml 显示组件，但组件未出现在缩放组件中。

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

缩放组件.html

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

缩放组件.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