如何在现有的 Angular 组件中添加组件 html

Question

我的 Angular 应用程序中有一个应用程序组件。

@Component({
    selector: my-container',
    template: `<div [innerHTML]="infoComponentHtml"></div>`
})
export class MyContainerComponent implements AfterViewInit {

    @Input() infoComponentHtml: string = "";

    constructor(private componentFactoryResolver: ComponentFactoryResolver){

    }

    ngAfterViewInit(): void {
        if(this.infoComponentHtml){
            ??????
            append this.infoComponentHtml dynamically
        }
        else{
            ??????
            append "<default-content></default-content>" dynamically
        }
    }
}

this.infoComponentHtml 格式是这样的"<component-name></component-name>"

this.infoComponentHtml 是来自另一个组件的第三方组件。所以我不知道它的组件类名。

如何编译和添加附加组件？

Answer 1

可以使用结构指令*ngIf:

HTML：

<ng-container *ngIf="showInfoComponent; else defaultContent">
    <infoComponent></infoComponent >
</ng-container>    
<ng-template #defaultContent>
    <default-content></default-content>
</ng-template>

更新：

您无法使用innerHTML 加载组件。为了动态加载组件，需要将组件infoComponentHtml设置为Type<Component>；

@Input() infoComponentHtml: Type<Component>;

然后使用this answer to load component dynamically