如何在不同的地方呈现指令内的内容

Question

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

在这种情况下，

页眉、页脚、主体。

any.html

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

期待它呈现以下内容

任意-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>

app-selector.component

  @ViewChildren("canvas") canvas: QueryList<ElementRef>;
  @ContentChild("myProjection") str : ElementRef;

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

如何在不同的地方呈现指令内的内容

How to render a content inside directive at various places

html

javascript

typescript

angular-directive

angular