Question

比方说，我有一个名为RecursiveComponent的组件（带有一个名为recursive的选择器）。它具有数字“标识符”作为输入，并且在其主体中接受更多的RecursiveComponents。因此，使用此组件的HTML代码可能如下所示：

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

为简单起见，该组件仅输出“ 标识符具有 x 个子对象”，然后通过<ng-content>完成插入的主体。这可行，但是要弄清楚有多少子组件，我必须用ViewChild包装ng-content并查看nativeElement的childNodes，我觉得这有点过头了。这是组件代码的样子：

@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-content？感觉就像是黑客。

正在运行的演示：https://stackblitz.com/edit/angular-wz8zu6

Answer 1

我认为这可能是您可以执行此类操作的唯一方法，您需要访问DOM中的元素。但是，使用@ViewChildren还有另一种（可能更好）的方法。

您可以使用ViewChildren获取元素的QueryList或 DOM中的指令。每当添加子元素时，删除或移动，查询列表将被更新，并且更改可观察到的查询列表将发出新值。

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

在没有包装ViewChild的情况下从组件代码访问ng-content

1 个答案: