在 Angular 5 中动态加载子组件 [英] Dynamically loading child components in Angular 5

问题描述

我想以 angular 动态加载子组件.父组件将根据某些条件加载子组件.

是否可以在父组件打字稿文件中定义子组件名称，而在 HTML 中我们使用字符串插值来加载组件?

例如在父组件打字稿中:

componentName = someCondition ?组件1":组件2"；

在 HTML 中

<app-{{componentName}}></app-{{componentName}}

我试过了，但它不起作用.将不胜感激！

解决方案

第一种方法:

<component-one *ngSwitchCase="'component1'"></component-one><component-two *ngSwitchCase="'component2'"></component-two>...</ng-容器>

第二种方法componentFactoryResolver

@Component({选择器:'父母'，模板:`<div #target></div>`})导出类父组件{@Input() 孩子:字符串；@Input() 值:字符串；//获取标签子组件将被放置@ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;private componentRef:ComponentRef;//子组件私人孩子 = {child1:Child1Component，child2:Child2Component};构造函数(私有编译器:ComponentFactoryResolver){}//将值传递给子组件渲染组件(){if (this.componentRef) this.componentRef.instance.value = this.value;}//编译子组件ngAfterContentInit() {让 childComponent = this.children[this.child ||'孩子1'];//解析子组件让 componentFactory = this.compiler.resolveComponentFactory(childComponent);this.componentRef = this.target.createComponent(componentFactory);this.renderComponent();}//当值改变时将值传递给子组件ngOnChanges(更改:对象){this.renderComponent();}}

子组件应声明为入口组件

I want to dynamically load the child components in angular. Parent component will load the child components based on some conditions.

Is it possible that we define the child component names in parent component typescript file and in HTML we use string interpolation to load the component?

For example in parent component typescript:

componentName = someCondition ? 'component1' : 'component2';

And in HTML

<app-{{componentName}}></app-{{componentName}}

I tried this but it's not working. Would appreciate any help on this!

解决方案

First approach:

<ng-container [ngSwitch]="componentName">
  <component-one *ngSwitchCase="'component1'"></component-one>
  <component-two *ngSwitchCase="'component2'"></component-two>
  ...
</ng-container>

Second approach componentFactoryResolver

@Component({
    selector: 'parent',
    template: `
        <div #target></div>
    `
})
export class ParentComponent {
    @Input() child: string;
    @Input() value: string;

    //Get tag child component will be placed
    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
    private componentRef:ComponentRef<any>;

    //Child components
    private children = {
        child1: Child1Component,
        child2: Child2Component
    };

    constructor(private compiler: ComponentFactoryResolver) {}

    //Pass through value to child component
    renderComponent(){
        if (this.componentRef) this.componentRef.instance.value = this.value;
    }

    //Compile child component
    ngAfterContentInit() {
        let childComponent = this.children[this.child || 'child1'];
        //Resolve child component
        let componentFactory = this.compiler.resolveComponentFactory(childComponent);
        this.componentRef = this.target.createComponent(componentFactory);
        this.renderComponent();
    }

    //Pass through value to child component when value changes
    ngOnChanges(changes: Object) {
        this.renderComponent();
    }
}

Children components should be declared as Entry components

这篇关于在 Angular 5 中动态加载子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！