如何在Angular指令中获取指定类型的所有子组件？

我之前也碰到过类似的第三方组件嵌套获取实例的棘手问题，给你几个经过验证的可行方案：

方案1：使用Angular 14+的ng.getComponent() API（生产环境推荐） #

既然你已经能通过ElementRef遍历到<pivot-grid>对应的DOM元素，那在Angular 14及以上版本中，可以用官方提供的ng.getComponent()方法直接从DOM元素拿到组件实例，这样就能直接设置它的height属性了，完美解决你之前只改DOM样式无效的问题。

示例代码：

import { Directive, ElementRef, OnInit } from '@angular/core';
import { ng } from '@angular/core';
import { PivotGridComponent } from '你的PivotGrid包路径';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 递归或直接选择所有嵌套的pivot-grid元素
    const pivotGridElements = this.el.nativeElement.querySelectorAll('pivot-grid');
    
    pivotGridElements.forEach((elem: HTMLElement) => {
      const pivotGridInstance = ng.getComponent(elem) as PivotGridComponent;
      if (pivotGridInstance) {
        // 根据splitter的尺寸动态计算并设置组件自身的height属性
        pivotGridInstance.height = 'calc(100% - 20px)';
      }
    });
  }
}

这个方法是Angular官方认可的生产环境可用API，完全替代了之前已弃用的组件树遍历方案。

方案2：全局服务注册PivotGrid实例（兼容低版本Angular） #

如果你的项目版本低于Angular 14，可以用全局服务来中转实例：

1. 先创建一个全局注册服务：

import { Injectable } from '@angular/core';
import { PivotGridComponent } from '你的PivotGrid包路径';

@Injectable({ providedIn: 'root' })
export class PivotGridRegistryService {
  private instanceMap = new Map<HTMLElement, PivotGridComponent>();

  register(element: HTMLElement, instance: PivotGridComponent) {
    this.instanceMap.set(element, instance);
  }

  getInstance(element: HTMLElement): PivotGridComponent | undefined {
    return this.instanceMap.get(element);
  }

  unregister(element: HTMLElement) {
    this.instanceMap.delete(element);
  }
}

2. 在封装PivotGrid的自定义组件（比如my-component-1、my-component-2）里注册实例：

import { Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { PivotGridRegistryService } from './pivot-grid-registry.service';
import { PivotGridComponent } from '你的PivotGrid包路径';

@Component({
  selector: 'my-component-1',
  template: `<div><pivot-grid></pivot-grid></div>`
})
export class MyComponent1 implements OnInit, OnDestroy {
  @ViewChild(PivotGridComponent) pivotGridInstance!: PivotGridComponent;
  private pivotGridElem!: HTMLElement;

  constructor(private el: ElementRef, private registry: PivotGridRegistryService) {}

  ngOnInit() {
    this.pivotGridElem = this.el.nativeElement.querySelector('pivot-grid')!;
    this.registry.register(this.pivotGridElem, this.pivotGridInstance);
  }

  ngOnDestroy() {
    this.registry.unregister(this.pivotGridElem);
  }
}

3. 最后在你的指令中通过DOM元素获取实例：

import { Directive, ElementRef, OnInit } from '@angular/core';
import { PivotGridRegistryService } from './pivot-grid-registry.service';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective implements OnInit {
  constructor(private el: ElementRef, private registry: PivotGridRegistryService) {}

  ngOnInit() {
    const pivotGridElements = this.el.nativeElement.querySelectorAll('pivot-grid');
    pivotGridElements.forEach((elem: HTMLElement) => {
      const instance = this.registry.getInstance(elem);
      if (instance) {
        instance.height = '100%';
      }
    });
  }
}

方案3：结合Splitter的resize事件更新高度 #

大部分第三方Splitter组件都会提供resize完成的回调事件，你可以在指令中监听这个事件，确保在Splitter尺寸变化后及时更新PivotGrid的高度，避免出现尺寸不匹配的问题：

import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
import { ng } from '@angular/core';
import { PivotGridComponent } from '你的PivotGrid包路径';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective implements OnInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    // 监听splitter的resize事件（事件名根据第三方组件调整）
    this.renderer.listen(this.el.nativeElement, 'resized', () => {
      this.updatePivotGridHeights();
    });
    // 初始化时先设置一次
    this.updatePivotGridHeights();
  }

  private updatePivotGridHeights() {
    const pivotGridElements = this.el.nativeElement.querySelectorAll('pivot-grid');
    pivotGridElements.forEach((elem: HTMLElement) => {
      const instance = ng.getComponent(elem) as PivotGridComponent;
      if (instance) {
        // 这里可以根据split-panel的实际高度动态计算
        const panelHeight = elem.parentElement?.clientHeight || 0;
        instance.height = `${panelHeight}px`;
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者Lunyx