在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中渲染组件模板中的多个模板

回答

相关问题