Как мне динамически получить доступ или отобразить Children в Angular Component?

Question

У меня есть компонент, называемый оболочкой, и его нужно использовать с другими дочерними компонентами. Я упомянул этот вопрос и эту статью . Но они, похоже, обращаются только в том случае, если я знаю, какой дочерний компонент я бы рендерил раньше Но в моем случае я мог бы просто передать туда div или h2.

Вот минимальный код воспроизведения

<app-wrapper>
  <app-edit-address></app-edit-address>
</app-wrapper>

<app-wrapper>
  <div>
    <label>Edit Email</label>
    <input />
  </div>
</app-wrapper>

<app-wrapper>
  <h2>
    Unauthorized 
  </h2>
</app-wrapper>

В React я могу легко отрендерить их просто пишу {props.children} но Angular не знаю как. Как я могу рендерить детей динамически, не зная детей заранее?

Answer 1

То, что вы пытаетесь сделать, называется Content Projection в Angular. Вы можете просто использовать ng-content для проецирования чего-либо.

@Component({
  selector: 'app-wrapper',
  template: `
    <div class="wrapper">
       <ng-content></ng-content>
    </div>
  `
})
export class WrapperComponent {}

И вы можете использовать его любым удобным вам способом

<app-wrapper>
  <app-edit-address></app-edit-address>
</app-wrapper>

<app-wrapper>
  <div>
    <label>Edit Email</label>
    <input />
  </div>
</app-wrapper>

<app-wrapper>
  <h2>
    Unauthorized 
  </h2>
</app-wrapper>

Все, что вы передадите между открывающими и закрывающими тегами, будет проецироваться в где ng-content есть.