Angular 16中ViewChild获取NgbOffcanvas内组件返回undefined求助

问题场景 #

在Angular 16项目中使用NgbOffcanvas时，将LazyloadedComponent嵌入到ng-template定义的弹窗模板内，通过@ViewChild('lazy')尝试获取该组件实例时始终返回undefined，点击TEST按钮调用test()方法时触发“无法读取未定义的test()”错误。

代码示例 #

组件类代码

import { Component, inject, TemplateRef, ViewChild } from '@angular/core';
import { LazyloadedComponent } from '../lazyloaded/lazyloaded.component';
import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-offcanvas',
  templateUrl: './offcanvas.component.html',
  styleUrls: ['./offcanvas.component.scss']
})
export class OffcanvasComponent {

  @ViewChild('offcanvas') offcanvas: TemplateRef<OffcanvasComponent>;
  @ViewChild('lazy') lazy: LazyloadedComponent;
  private offcanvasService = inject(NgbOffcanvas);
  
  open() {
    this.offcanvasService.open(this.offcanvas);
  }

  test() {
    this.lazy.test();
  }
}

模板代码

<ng-template #offcanvas let-offcanvas>
    <div class="offcanvas-body">
        <app-lazyloaded #lazy></app-lazyloaded>
        <button (click)="test()">TEST</button>
    </div>
</ng-template>

问题原因 #

Angular 16中，ng-template属于未渲染的静态模板内容，只有通过NgbOffcanvasService将其动态挂载到DOM中时，内部的组件才会被实例化。而@ViewChild默认在组件初始化阶段（ngAfterViewInit）查询视图元素，此时弹窗模板尚未渲染，因此无法捕获到LazyloadedComponent实例。此外，NgbOffcanvas的弹窗内容属于动态创建的视图，不在当前组件的常规视图查询范围内，也是@ViewChild失效的核心原因。

解决方案 #

方案1：通过NgbOffcanvasRef获取组件实例 #

调用offcanvasService.open()会返回NgbOffcanvasRef实例，利用其shown事件监听弹窗渲染完成，再通过contentViewRef访问弹窗内的组件：

import { Component, inject, TemplateRef, ViewChild } from '@angular/core';
import { LazyloadedComponent } from '../lazyloaded/lazyloaded.component';
import { NgbOffcanvas, NgbOffcanvasRef } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-offcanvas',
  templateUrl: './offcanvas.component.html',
  styleUrls: ['./offcanvas.component.scss']
})
export class OffcanvasComponent {

  @ViewChild('offcanvas') offcanvas: TemplateRef<OffcanvasComponent>;
  private offcanvasService = inject(NgbOffcanvas);
  private offcanvasRef: NgbOffcanvasRef;
  private lazy: LazyloadedComponent;
  
  open() {
    this.offcanvasRef = this.offcanvasService.open(this.offcanvas);
    // 监听弹窗显示完成事件
    this.offcanvasRef.shown.subscribe(() => {
      // 从弹窗根节点中查找目标组件
      const lazyElement = this.offcanvasRef.contentViewRef.rootNodes[0].querySelector('app-lazyloaded');
      if (lazyElement) {
        this.lazy = lazyElement as LazyloadedComponent;
      }
    });
  }

  test() {
    this.lazy?.test();
  }
}

方案2：直接在模板内调用组件方法 #

无需在父组件中获取实例，直接通过模板变量在弹窗模板内调用组件方法，这种方式更简洁：

<ng-template #offcanvas let-offcanvas>
    <div class="offcanvas-body">
        <app-lazyloaded #lazy></app-lazyloaded>
        <button (click)="lazy.test()">TEST</button>
    </div>
</ng-template>

方案3：升级至Angular 18 #

该问题在Angular 18中已被修复，Angular优化了动态视图的查询逻辑，@ViewChild可以正确捕获NgbOffcanvas模板内的组件实例。

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