如何在不同位置渲染指令内的内容

Question

我想要一个组件指令来渲染放置在其选择器内的任何内容，以便在其 html 内的特定部分进行渲染。

在这种情况下，页眉、页脚、主要内容。

任何.html

<any-selector>

    <div>content to place</div>

</any-selector>

期望它呈现以下内容

任意选择器.html

<header><div>content to place</div></header>

<main><div>content to place</div></main>

<footer><div>content to place</div></footer>

尝试过，ng-content但它仅在第一次出现时呈现<ng-content>

如果有什么办法可以达到这个目的吗？

Answer 1

因此，这是 的预期行为ng-content，要么您将[select]指向某个ng-content，要么您可以仅在第一次出现 时进行渲染ng-content。我尝试了一种对我有用的方法。这是演示工作代码<any-selector>&nbsp; &nbsp; <div #myProjection>content to place</div></any-selector>然后在app-selector.HTML中你可以这样做：<div id='border'>&nbsp; &nbsp; <h1>Hello Component</h1>&nbsp; &nbsp; <header><div #canvas></div></header>&nbsp; &nbsp; <footer><div #canvas></div></footer></div>应用程序选择器.组件&nbsp; @ViewChildren("canvas") canvas: QueryList<ElementRef>;&nbsp; @ContentChild("myProjection") str : ElementRef;&nbsp; ngAfterViewInit() {&nbsp; &nbsp; &nbsp;this.canvas.forEach((div: ElementRef) =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div.nativeElement.insertAdjacentHTML('beforeend', this.str.nativeElement.innerHTML));&nbsp; &nbsp;}