在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ angular展示動態(tài)組件

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

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

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

<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屬性進行判斷，如果匹配上某一個組件就把它顯示出來，同時給它添加上一些input和output的屬性用父子組件之間的交流?，F(xiàn)在運行一切良好，可是隨著程序的擴大，需要動態(tài)展現(xiàn)的組件變得越來越多，整個html頁面變得異常龐大，也有點惡心。

因此，我打算進行重構(gòu)，我準備使用的方法就是動態(tài)組件Dynamic Component的方法。在閱讀完相關(guān)的文檔（angular.cn）后，我不再使用ngSwitch來判斷，而是根據(jù)type屬性，動態(tài)創(chuàng)建出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;

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

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

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

謝謝！

回答
編輯回答
幼梔

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

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

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

如果覺得有幫助請采納~

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

利用動態(tài)增加組件的功能，子組件的數(shù)據(jù)修改，父組件未能接收到數(shù)據(jù)，這個你可以做一個服務(wù)，
利用rxjs進行監(jiān)聽子組件的變化
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展示動態(tài)組件的問題有解決辦法么?我也遇到這個問題了

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)出來就可以了，下標index可以標識每一個不同的組件

2018年5月14日 12:37