Angular如何获取第三方组件内部嵌套的自定义子组件引用

常见失败原因 #

• 调用时机错误：在ngOnInit生命周期中访问引用，此时视图尚未完成挂载，引用必然返回空值
• 第三方组件懒加载：ngx-bootstrap的accordion默认开启内容懒加载，折叠状态下的面板内部投影内容不会被渲染，组件未初始化自然无法获取引用
• 模板引用作用域问题：如果第三方组件做了内容隔离（极少出现），会导致模板引用无法被父组件直接捕获

对应解决方案 #

1. 调整引用访问时机 #

必须在ngAfterViewInit生命周期钩子执行后再访问@ViewChild获取的引用，代码示例如下：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { EmployeeDetailsComponent } from './employee-details.component';

@Component({
  selector: 'app-parent-component',
  template: `
  <accordion>
    <accordion-group heading="员工详情">
      <app-employee-details #employeeDetails></app-employee-details>
    </accordion-group>
  </accordion>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('employeeDetails') employeeDetails!: EmployeeDetailsComponent;

  ngAfterViewInit(): void {
    // 此处可正常获取到引用
    console.log(this.employeeDetails);
  }
}

2. 处理accordion懒加载 #

方案A：关闭懒加载（推荐）

给accordion组件添加关闭懒加载的配置参数，确保组件初始化时就渲染所有投影内容：

<!-- 不同版本ngx-bootstrap的懒加载参数可能为lazyLoadContent或者isLazy，按你使用的版本调整即可 -->
<accordion [lazyLoadContent]="false">
  <accordion-group heading="员工详情">
    <app-employee-details #employeeDetails></app-employee-details>
  </accordion-group>
</accordion>

方案B：监听面板展开事件获取引用

如果需要保留懒加载特性，可以监听accordion的面板展开事件，触发后再获取引用即可。

3. 兜底方案 #

如果上述方案都不生效，可以通过{ read: ElementRef }配置先获取DOM节点，再通过DOM节点的关联属性拿到组件实例，或者用ChangeDetectorRef手动触发变更检测后再读取引用。

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