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

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 时进行渲染。

我尝试了一种对我有用的方法。 Here is the demo working code

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

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