如何在不同的位置呈现指令内部的内容

Question

我想要一个组件指令来呈现它的选择器中的任何内容，以便在它的html中的特定部分进行呈现。

页眉、页脚、主在这种情况下。

any.html

<any-selector>
<div>content to place</div>
</any-selector>

期望它在之后呈现

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>
<div #myProjection>content to place</div>
</any-selector>

然后在应用程序选择器中。HTML你可以做：

<div id='border'>
<h1>Hello Component</h1>
<header><div #canvas></div></header>
<footer><div #canvas></div></footer>
</div>

应用程序选择器组件

@ViewChildren("canvas") canvas: QueryList<ElementRef>;
@ContentChild("myProjection") str : ElementRef;
ngAfterViewInit() {
this.canvas.forEach((div: ElementRef) => 
div.nativeElement.insertAdjacentHTML('beforeend', this.str.nativeElement.innerHTML));
}