Question

我正在尝试构建一个可以在两个模板之间进行切换分区的组件。有点像复制两个相邻的可调整大小的帧。我认为我的组件将接受两个模板输入，然后围绕它们渲染div以及它们之间的div作为分区滑块。这就是我认为实现的样子：

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

组件选择器是＆＃39; split-component＆＃39;模板的两个输入是＆＃39; frameOne＆＃39;和＆＃39; frameTwo＆＃39;。我无法在文档或任何示例中找到如何在组件模板内部的组件外部包含模板。

这是我的首要组成部分：

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}}无法工作，但是还有其他的东西吗？

更新

我将此添加到我的组件中：

@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旁边添加了模板的内容而不是内部...

Answer 1

我已用我的解决方案更新了问题。也许有一种方法可以使用渲染器，但我已经停止了它。我对更高级的解决方案感兴趣。

在Angular中的组件模板中渲染多个模板

1 个答案: