Angular - 在另一個代碼中添加組件（代碼中）

我正在嘗試使用Angular構建一個可重新調整大小的面板系統。因此，您可以使用一個欄來分隔多個容器，以便用戶調整它們的大小。Angular - 在另一個代碼中添加組件（代碼中）

目前我有一個要求開發人員編寫HTML代碼的解決方案：

<split-pane> 
    <container>Some content</container> 
    <separator></separator> 
    <container>Another content</container> 
    <separator></separtor> 
    <container>Content ?</container> 
<split-pane>

拆分窗格，容器和分離都是定製angular2組件。拆分窗格模板只是

<ng-content></ng-content>

，我使用@ContentChildren(ContainerComponent)和@ContentChildren(SeparatorComponent)

我有這個解決方案的問題訪問拆分窗格內容器和separtor，就是developper需要在所有容器之間手動添加每個分隔符。

我想有一個解決方案，所需的HTML是：

<split-pane> 
    <container>Some content</container> 
    <container>Another content</container> 
    <container>Content ?</container> 
<split-pane>

而且分離組件將被自動添加。但我不知道如何與Angular做到這一點。 Transclusion似乎是一種解決這個問題的方法，但是我無法將其包裹起來。

有什麼想法？

感謝

來源

2017-04-26 cpaulus

如果我們需要，因此首先我們需要說一下我們這樣的動態組件的角度編譯器的動態加載的東西：

... 
    entryComponents: [SeparatorComponent] 
}) 
export class AppModule {}

因此，我們需要的模板看起來是這樣的：

<split-pane> 
    <container>Some content</container> 
    <container>Another content</container> 
    <container>Content ?</container> 
</split-pane>

爲了添加container元素之間的東西，我們應該得到ViewContainerRef每個container。我會內SplitPaneComponent做以下方式

@ContentChildren(ContainerComponent, { read: ViewContainerRef }) containersRefs: QueryList<ViewContainerRef>;

那麼就使用ComponentFactoryResolver得到元件廠及以上ViewContainers收到後container標籤添加SeparatorComponent。看來它應該是這樣的：

ngAfterContentInit() { 
    this.containersRefs.forEach((vcRef: ViewContainerRef, index: number, arr: any[]) => { 
    if(index === arr.length - 1) { 
     return; 
    } 

    let compFactory = this.resolver.resolveComponentFactory(SeparatorComponent); 
    let compRef = vcRef.createComponent(compFactory); 
    this.separators.push(compRef); 
    }) 
}

Plunker Example

來源

2017-04-26 10:46:06 yurzui

正是我需要的。非常感謝！ – cpaulus

很高興幫助！ :) – yurzui

這不符合您的需要的語法，而是通過使用ngFor您可以使代碼更短。

聯合ngFor與last：

<template ngFor let-item [ngForOf]="items" let-i="index" let-last="last"> 
    <container>{{item.content}}</container> 
    <separator *ngIf="!last"></separator> 
</template>

定義在組件類items，所以可以獲取數據。

來源

2017-04-26 10:51:19

我不認爲這會工作，因爲容器的內容可能是另一個組件。 – cpaulus

Angular - 在另一個代碼中添加組件（代碼中）

回答

相關問題