Доступ к ng-контенту из кода компонента без оболочки ViewChild

Question

Допустим, у меня есть компонент с именем RecursiveComponent (с селектором с именем recursive). Он имеет номер «идентификатор» в качестве входных данных, а также принимает больше RecursiveComponents в своем теле. Поэтому HTML-код, который использует этот компонент, может выглядеть так:

<recursive identifier="1">
  <recursive identifier="2">
    <recursive identifier="3"></recursive>
  </recursive>
  <recursive identifier="4"></recursive>
</recursive>

Для простоты компонент выводит только " идентификатор имеет x потомков" и затем вставленное тело, которое выполняется через <ng-content>. Это работает, но чтобы выяснить, сколько есть дочерних компонентов, мне нужно обернуть ng-контент с помощью ViewChild и посмотреть на дочерние узлы nativeElement, которые, как мне кажется, немного излишни. Вот как выглядит код компонента:

@Component({
  selector: 'recursive',
  template: `
    {{identifier}} has {{noOfChildren}} children 
    <div #contentRef>
      <ng-content select="recursive"></ng-content>
    </div>`
})
export class RecursiveComponent implements OnChanges {
  @ViewChild('contentRef', { read: ElementRef }) contentRef: ElementRef;

  @Input() identifier: number;

  noOfChildren: number;

  ngOnChanges() {
    if (this.contentRef) {
      this.noOfChildren = this.contentRef.nativeElement.childNodes.length;
    }
  }
}

Есть ли лучший и более Angular-подобный способ доступа к ng-контенту из кода компонента? Это похоже на взлом.

Рабочая демоверсия: https://stackblitz.com/edit/angular-wz8zu6

Answer 1

Я думаю, что это, вероятно, единственный способ сделать что-то подобное, вам нужен доступ к элементам в DOM. Однако есть и другой (возможно, лучший) способ сделать это с помощью @ ViewChildren.

Вы можете использовать ViewChildren, чтобы получить QueryList элементов или Директивы с точки зрения DOM. Каждый раз, когда добавляется дочерний элемент, удален или перемещен, список запросов будет обновлен, а изменения наблюдаемый из списка запросов будет выдавать новое значение.

https://angular.io/api/core/ViewChildren#viewchildren