angular展示动态组件

Question

大家好，我正在使用angular4.x和cli开发网页。现在我正在面临一个架构上的问题，想请教一下sg的各位大神们。

我现在有一个列表组件，用来在不同情况下展示出不同的子组件。代码如下：

<div [ngSwitch]="type">
    <component-one  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-one>
    
    <component-two  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-two>
    
    <component-three  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-three>
    
    <component-four  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-four>
    
    <component-five  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-five>
    
    <component-six  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-six>
</div>

我现在的做法就是使用了ngSwitch，根据type属性进行判断，如果匹配上某一个组件就把它显示出来，同时给它添加上一些input和output的属性用父子组件之间的交流。现在运行一切良好，可是随着程序的扩大，需要动态展现的组件变得越来越多，整个html页面变得异常庞大，也有点恶心。

因此，我打算进行重构，我准备使用的方法就是动态组件Dynamic Component的方法。在阅读完相关的文档（angular.cn）后，我不再使用ngSwitch来判断，而是根据type属性，动态创建出component并且将其嵌入到一个固定的位置中：

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);  //解析一个component
this.viewContainerRef.clear();
this.componentRef = this.viewContainerRef.createComponent(componentFactory);

并且为其加入input和output属性

(this.componentRef.instance).someInput = this.someData;

以上全部内容都和官方文档没有太大差异。可是我却发现，动态加载的组件，根本不会调用ngOnChanges方法（https://github.com/angular/an...）。这导致动态加载的组件的很多逻辑都会出现错误。

所以，我现在总结一下我的两大类方法：1.使用ngSwitch，会出现代码庞大，十几个component堆在html文件中的情况，我觉得比较恶心。2.使用动态组件，发现动态组件对@Input，@Output还有生命钩子的支持都很不足。

最后想问下大家：当一个列表组件需要根据不同情况，加载不同组件时，使用什么方式可以整洁地把这些组件加载出来，并且可以做到子组件和父组件之间的信号传递完整，子组件可以正常更新？

谢谢！

Answer 1

直接ngFor循环出来就可以了，下标index可以标识每一个不同的组件

Answer 2

哥们,angular展示动态组件的问题有解决办法么?我也遇到这个问题了

Answer 3

不知道问题有没有解决？
那我就给个方案，定义一个container组件，定义一个input property options
options的结构如下：

{
    id: "container",
    children: [
      {
        selector: "component1",
        options: {}
      },
      {
        selector: "component2",
        options: {}
      }
      ...
    ]
}

所有希望动态生成的组件放到options.children里面
然后使用*ngFor遍历options.children， 通过selector来匹配对应的component

<div>
    <ng-container *ngFor="let opt of options.children">
        <ng-container *ngIf="opt && opt.selector && opt.options">
            <component1 *ngIf="opt.selector === 'component1'"></component1>
            <component2 *ngIf="opt.selector === 'component2'"></component2>
        </ng-container>
    </ng-container>
</div>

如果觉得有帮助请采纳~

Answer 4

子组件里面

private _someInput: any;
public get someInput(): any{
    return _someInput
}
public set someInput( v: any ) {
    // 逻辑处理
    this._someInput = v
}

Answer 5

利用动态增加组件的功能，子组件的数据修改，父组件未能接收到数据，这个你可以做一个服务，
利用rxjs进行监听子组件的变化
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ShareService {

private subject = new Subject<any>();

sendMessage(message: boolean) {
    this.subject.next({ message });
}

clearMessage() {
    this.subject.next();
}

getMessage(): Observable<any> {
    return this.subject.asObservable();
}

}
父组件调用get方法就可以了。我是这样处理的。你可以尝试下