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

我需要一个组件指令来呈现放入选择器中的任何内容，并在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内容尝试了它，但它仅在
第一次出现时才呈现

如果有什么办法可以做到这一点
 因此，这是
ng content
的预期行为，您可以将
[选择]
指向某些
ng content
，也可以仅在
ng content
第一次出现时进行渲染

我尝试了一种对我有效的方法


安于现状

然后在app 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));
   }


@ViewChildren（“canvas”）画布：QueryList；
@ContentChild（“myProjection”）str:ElementRef；
ngAfterViewInit（）{
this.canvas.forEach（（div:ElementRef）=>
insertAdjacentHTML（'beforeend'，this.str.nativeElement.innerHTML））；
}
您尝试过的
ng内容的实现是什么？您是否可以共享实现而不仅仅是片段？或者更好的办法是创建一把小提琴？@Ajeet:你试过我的答案吗？@ShashankVivek是的，它工作起来就像天堂一样，我唯一做的改变就是使用
outerHTML
而不是
innerHTML
。谢谢！）
  @ViewChildren("canvas") canvas: QueryList<ElementRef>;
  @ContentChild("myProjection") str : ElementRef;

  ngAfterViewInit() {
     this.canvas.forEach((div: ElementRef) => 
         div.nativeElement.insertAdjacentHTML('beforeend', this.str.nativeElement.innerHTML));
   }