鍍金池/ 問(wèn)答/HTML5  HTML/ angular展示動(dòng)態(tài)組件

angular展示動(dòng)態(tài)組件

大家好，我正在使用angular4.x和cli開(kāi)發(fā)網(wǎng)頁(yè)?，F(xiàn)在我正在面臨一個(gè)架構(gòu)上的問(wèn)題，想請(qǐng)教一下sg的各位大神們。

我現(xiàn)在有一個(gè)列表組件，用來(lái)在不同情況下展示出不同的子組件。代碼如下：

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

我現(xiàn)在的做法就是使用了ngSwitch，根據(jù)type屬性進(jìn)行判斷，如果匹配上某一個(gè)組件就把它顯示出來(lái)，同時(shí)給它添加上一些input和output的屬性用父子組件之間的交流?，F(xiàn)在運(yùn)行一切良好，可是隨著程序的擴(kuò)大，需要?jiǎng)討B(tài)展現(xiàn)的組件變得越來(lái)越多，整個(gè)html頁(yè)面變得異常龐大，也有點(diǎn)惡心。

因此，我打算進(jìn)行重構(gòu)，我準(zhǔn)備使用的方法就是動(dòng)態(tài)組件Dynamic Component的方法。在閱讀完相關(guān)的文檔（angular.cn）后，我不再使用ngSwitch來(lái)判斷，而是根據(jù)type屬性，動(dòng)態(tài)創(chuàng)建出component并且將其嵌入到一個(gè)固定的位置中：

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

并且為其加入input和output屬性

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

以上全部?jī)?nèi)容都和官方文檔沒(méi)有太大差異?？墒俏覅s發(fā)現(xiàn)，動(dòng)態(tài)加載的組件，根本不會(huì)調(diào)用ngOnChanges方法（https://github.com/angular/an...）。這導(dǎo)致動(dòng)態(tài)加載的組件的很多邏輯都會(huì)出現(xiàn)錯(cuò)誤。

所以，我現(xiàn)在總結(jié)一下我的兩大類(lèi)方法：1.使用ngSwitch，會(huì)出現(xiàn)代碼龐大，十幾個(gè)component堆在html文件中的情況，我覺(jué)得比較惡心。2.使用動(dòng)態(tài)組件，發(fā)現(xiàn)動(dòng)態(tài)組件對(duì)@Input，@Output還有生命鉤子的支持都很不足。

最后想問(wèn)下大家：當(dāng)一個(gè)列表組件需要根據(jù)不同情況，加載不同組件時(shí)，使用什么方式可以整潔地把這些組件加載出來(lái)，并且可以做到子組件和父組件之間的信號(hào)傳遞完整，子組件可以正常更新？

謝謝！

回答
編輯回答
幼梔

不知道問(wèn)題有沒(méi)有解決？
那我就給個(gè)方案，定義一個(gè)container組件，定義一個(gè)input property options
options的結(jié)構(gòu)如下：

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

所有希望動(dòng)態(tài)生成的組件放到options.children里面
然后使用*ngFor遍歷options.children， 通過(guò)selector來(lái)匹配對(duì)應(yīng)的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>

如果覺(jué)得有幫助請(qǐng)采納~

2018年9月4日 17:34
編輯回答
久舊酒

利用動(dòng)態(tài)增加組件的功能，子組件的數(shù)據(jù)修改，父組件未能接收到數(shù)據(jù)，這個(gè)你可以做一個(gè)服務(wù)，
利用rxjs進(jìn)行監(jiān)聽(tīng)子組件的變化
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();
}

}
父組件調(diào)用get方法就可以了。我是這樣處理的。你可以嘗試下

2018年3月31日 17:56
編輯回答
鹿惑

哥們,angular展示動(dòng)態(tài)組件的問(wèn)題有解決辦法么?我也遇到這個(gè)問(wèn)題了

2017年8月28日 01:11
編輯回答
孤酒

子組件里面

private _someInput: any;
public get someInput(): any{
    return _someInput
}
public set someInput( v: any ) {
    // 邏輯處理
    this._someInput = v
}
2017年6月28日 14:14
編輯回答
笑忘初

直接ngFor循環(huán)出來(lái)就可以了，下標(biāo)index可以標(biāo)識(shí)每一個(gè)不同的組件

2018年5月14日 12:37