Angular循环渲染场景下如何从单个SectionComponent访问其他同类组件

场景还原 #

在app.component.html中，你通过*ngFor循环渲染生成3个SectionComponent，代码如下：

<div *ngFor="let section of sectionObjectList">
  <app-section [section]="section"></app-section>
</div>

当前需求是：在其中某一个SectionComponent的类文件中，访问其余的SectionComponent组件实例，直接操作这些实例的内部字段、调用实例内部方法。

可落地的实现方式 #

方式1：通过全局共享注册服务收集所有实例 #

这种方式耦合最低，不会把组件的跨实例依赖硬绑死，可维护性最好，具体步骤：

• 新建一个根作用域的注入服务，比如SectionRegistryService，服务内部维护一个数组存所有SectionComponent的实例引用，提供两个公开方法：
  • register(instance: SectionComponent)：接收传入的组件实例，存入内部数组
  • unregister(instance: SectionComponent)：接收传入的组件实例，从数组中移除
• 在每个SectionComponent的ngOnInit钩子里，注入SectionRegistryService，调用register(this)把自身注册到服务里；在ngOnDestroy钩子里调用unregister(this)注销自身，避免内存泄漏
• 需要操作其他实例的那个SectionComponent，直接从SectionRegistryService维护的实例数组里取到目标实例，就能直接访问其内部字段、调用内部方法。
  小提醒：这个方式要确保服务的注入作用域是root，不要嵌在某个模块的providers里，不然会出现实例收集不全的问题；如果SectionComponent用在懒加载场景，root作用域的服务才能保证全链路收集到所有实例

方式2：通过父组件做实例中转 #

如果不想新增全局服务，可以靠渲染这些组件的父组件做中转：

• 在持有*ngFor逻辑的父组件中，用@ViewChildren(SectionComponent)装饰器，直接拿到所有渲染出来的SectionComponent实例的QueryList
• 给每个SectionComponent定义一个输出事件@Output() onInstanceReady = EventEmitter<SectionComponent>()，组件初始化完成时，把自身实例通过这个事件抛给父组件
• 需要跨实例操作的那个SectionComponent，可以通过共享服务或者父组件传参，拿到父组件持有的全量实例列表，再执行对应操作。

避坑提示 #

• 不要通过DOM查询找其他组件的宿主节点，再反向解析组件实例，这种写法会彻底破坏Angular的组件封装，稍微调整DOM结构就会出问题
• 访问其他实例的方法和字段时，要注意生命周期时序：如果取到实例的时候目标组件还没完成初始化，对应的内部属性、方法可能还没挂载，最好结合ngAfterViewInit的执行时序做判断
• 所有收集到的跨组件引用，一定要在对应组件销毁时清理，不然会留下无法回收的内存占用

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