Question

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

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

尝试使用mat-progress-bar static html

放大component.html

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

放大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

通过angular5中的innerHtml加载组件

1 个答案: