Как сделать контент внутри директивы в разных местах - PullRequest
Новая
       18

Как сделать контент внутри директивы в разных местах

1 голос
/ 19 марта 2020

Я хочу, чтобы директива компонента отображала что-либо, помещенное в его селектор, в определенные секции c внутри его 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>

Если есть какой-нибудь способ достичь этого?

1 Ответ

2 голосов
/ 19 марта 2020

Итак, это ожидаемое поведение от 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>

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