Как вложить один компонент в другой? - PullRequest
Новая
       4

Как вложить один компонент в другой?

0 голосов
/ 06 ноября 2019

Теперь в основном компоненте я делаю итерацию items = [1,2,3]: 

<ng-content *ngFor="item in items">
   <app-form [item]="item"></app-form>
</ng-content>

В результате я получаю это: 

 <app-form [item]="item" type="1"></app-form>
 <app-form [item]="item" type="2"></app-form>
 <app-form [item]="item" type="3"></app-form>

Как лучше перестроить DOM и сделать компоненты вложенными?

Например, вставить <app-form [item]="item" type="1"></app-form> внутри <app-form [item]="item" type="2"></app-form>?

Должен ли я сделать это в цикле или я могу манипулировать готовым DOM и перестроить его?

Мне нужен советпрофессий, спасибо!

1 Ответ

2 голосов
/ 06 ноября 2019

Content Projection сделает то, что вы ищете. Доступ ко всему, что вложено в теги селектора компонента, можно получить с помощью <ng-content>.

app-form.component.html 

<h1>App Form!</h1>
<ng-content></ng-content>

app.component.html 

<app-form>
  <app-form></app-form>
</app-form>

Этот пример кода на самом деле просто визуализирует 

App Form!
App Form!
...