NG4 componentFactory將其放置在DOM對象

Question

我所試圖做的

我一票鑄造系統，這將在有關網頁的多個組件重用的工作。爲了保持乾燥，我想從任何組件創建投票組件到指定的DOM元素中。創建組件後，必須設置實例變量（在這種情況下，model:string和pk:number，都是公共的）。

預期的結果

我希望組件在指定地點進行渲染，印刷工廠已創建的組件後立即在已經設定了正確的數據。在選票底部的輸出應該是Model: project PK: 1

實際情況

的ComponentFactory目前由組件工廠創建的投票分量輸出：

1. 在正確的位置（目標div），但沒有設置實例變量。

2. 在頁面的底部，但這是另一個問題，在以後的時間和其他主題。

某些代碼

@NgModule({ 
    .. 
    declarations: [ 
     AppComponent, 
     ProjectComponent, // parent for voteContainer 
     VoteComponent, // Dynamic component 
    ], 
    entryComponents: [ 
     VoteComponent, 
    ], .. 
}) 

含有VoteComponent工廠父組件

export class ProjectDetailComponent implements AfterViewInit { 
    @ViewChild('voteComponentContainer', {read: ViewContainerRef}) voteComponentContainer; 

    public ngAfterViewInit() { 
     this.factoryVoteComponent(); 
    } 

    private factoryVoteComponent() { 
     const voteComponentFactory = this.componentFactoryResolver.resolveComponentFactory(VoteComponent); 
     const voteComponentRef = this.viewContainerRef.createComponent(voteComponentFactory); 
     voteComponentRef.instance.model = "project"; 
     voteComponentRef.instance.pk = 1; 
     voteComponentRef.changeDetectorRef.detectChanges(); 
    } 
} 

動態分量目標：

<vote-component-container></vote-component-container> 

基本投票元器件

@Component({ 
    selector: 'vote-component-container', 
    templateUrl: 'vote.component.html', 
}) 

export class VoteComponent { 
    public model:string; 
    public pk:number; 
    public constructor(){} 
} 

我已經試過

我一直在這個苦苦掙扎了好一陣子，所以有 相當一些嘗試，得到它的工作。最後的嘗試是 與工廠創建ViewChild。

除此之外，我一直在玩弄名稱，設置組件的模板接收不同的方式，等

我想問

有沒有人有任何的經驗是什麼針對我現在正在嘗試的情況使用動態組件？我希望能夠在正確的方向上推動如何解決在正確的位置渲染組件的問題，但沒有可用的屬性。

Answer 1

經過一些更多的研究，測試失敗和嘗試更多 - 我發現它是一個解決方案。我還沒有100％滿意，因爲它變得不那麼幹燥和有組織 - 但現在：

首先，我必須調整將數據傳遞給動態生成組件的方式。我必須更新我的選擇器目標才能接受所需的屬性。在我的情況下，model和objectId。

<vote-component-container [model]="'project'" [objectId]="projectId"></vote-component-container> 

將此數據鏈接到VoteComponent，在VoteComponent本身需要@Input制定者對於這樣的數據輸入：

import { Input, Component, AfterViewInit } from '@angular/core'; 

@Component({ 
    selector: 'vote-component-container', 
    templateUrl: 'vote.component.html', 
}) 

export class VoteComponent implements AfterViewInit { 
    // Temp public for testing 
    public _objectId:number; 
    public _model:string; 

    public constructor(){} 
    public ngAfterViewInit(){ 
     this.getVotes(); 
    } 

    @Input('objectId') 
    set objectId(objectId:number){ 
     this._objectId = objectId; 
    } 

    @Input('model') 
    set model(model:string){ 
     this._model = model; 
    } 

    public getVotes(){ 
     ... 
    } 
} 

在我父組件

，最終，我預計PARAMS [「身份證」]部分是在ngAfterInit中調用函數的時候。但事與願違，所以我不得不等待承諾..

@ViewChild('voteComponentContainer', {read: ViewContainerRef}) target: ViewContainerRef; 
private factoryVoteComponent(){ 
    this.activatedRoute.params.subscribe((params: Params) => { 
     this.model = 'project'; 
     this.projectId = params['id']; 

     let voteComponentFactory = this.componentFactoryResolver.resolveComponentFactory(VoteComponent); 
     this.voteComponentRef = this.viewContainerRef.createComponent(voteComponentFactory); 
     this.voteComponentRef.changeDetectorRef.detectChanges(); 
    }); 
}