Question

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

@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

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

1 个答案: