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

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>

    <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));

   }