在Angular中渲染組件模板中的多個模板

我試圖構建一個組件，它可以在兩個模板之間創建一個拖動分區。有點像複製兩個相鄰的可調整大小的幀。我在想，我的組件將接受兩個模板輸入，然後在它們周圍渲染一個div以及它們之間的一個div，它們充當分區滑塊。這就是我認爲的執行將是這樣的：在Angular中渲染組件模板中的多個模板

<template #frameOne>content of the first template</template> 
<template #frameTwo>content of the second template</template> 
<split-component [frameOne]="frameOne" [frameTwo]="frameTwo"><split-component>

當組件選擇是「拆分組件」和模板的兩個輸入「frameOne」和「frameTwo」。我無法在文檔或任何示例中的任何位置找到如何在組件模板內的組件外部包含模板。

這裏是我的啓動構件：

import { Component, Input, TemplateRef, ViewContainerRef, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'split-component', 
    templateUrl: './split.component.html', 
    styleUrls: ['./split.component.scss'] 
}) 
export class SplitComponent implements OnInit { 
    @Input() firstFrame: TemplateRef<any>; 
    @Input() secondFrame: TemplateRef<any>; 
}

併爲它的模板：

<div class="split"> 
    <div class="frame1">{{firstFrame}}</div> 
    <div class="divider-bar"> 
    <div class="handle">:::</div> 
    </div> 
    <div class="frame2">{{secondFrame}}</div> 
</div>

當然{{firstFrame}}將無法正常工作，但有沒有別的東西，會嗎？

UPDATE

我將此添加到我的組件：

@ViewChild("frame1", {read: ViewContainerRef}) frame1: ViewContainerRef; 
@ViewChild("frame2", {read: ViewContainerRef}) frame2: ViewContainerRef; 

ngAfterViewInit(): void { 
    this.frame1.createEmbeddedView(this.firstFrame); 
    this.frame2.createEmbeddedView(this.secondFrame); 
}

而且改變了我的模板，以這樣的：

<div class="split"> 
    <div class="frame1" #frame1></div> 
    <div class="divider-bar"> 
    <div class="handle">:::</div> 
    </div> 
    <div class="frame2" #frame2></div> 
</div>

但它增加了模板的框架旁的內容div而不是裏面...

來源

2017-06-05 Rudecles

我對此不太確定，但正如你所提到的，沒有相同的文檔，你可以檢查動態組件。 https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html –

是的，我一定已經讀過那個頁面，現在可能有10次了。文件嚴重缺乏。我認爲我的解決方案是可以的。我結束了在一個div包裝幀，並使用這些來調整大小。 – Rudecles

你有沒有嘗試過使用'ng-container'作爲'ViewContainerRef'？ – yurzui

我用我的解決方案更新了這個問題。也許還有一種方法可以用Renderer來做到這一點，但我已經停止了它的工作。我會對更合適的解決方案感興趣。

來源

2017-06-06 22:06:44 Rudecles

在Angular中渲染組件模板中的多個模板

回答

相關問題