如何在代码中获取NgComponentOutlet加载的组件实例？

我正在使用ngComponentOutlet动态展示调用方提供的组件，完全不了解该组件类型。模板简化如下：

<div [innerText]="options.title"></div>
<ng-container *ngComponentOutlet="options.componentType"></ng-container>
<button (click)="showInfo()">Info</button>

调用方会传入如下配置对象：

export interface DisplayOptions<TComponent> {
  readonly componentType: Type<TComponent>;
  
  readonly title: string;
  
  readonly onClickInfo: (cmp: TComponent) => void;
}

点击“Info”按钮时，需要调用onClickInfo函数并传入组件实例的引用，请问在showInfo()函数中如何获取这个实例？

解决方案 #

要获取ngComponentOutlet创建的组件实例，可通过模板变量结合ViewChild实现，具体步骤如下：

1. 修改模板，添加模板变量并绑定Outlet属性
   给<ng-container>添加模板变量，同时利用ngComponentOutlet的outlet导出属性关联组件实例：

<div [innerText]="options.title"></div>
<ng-container #componentOutlet="ngComponentOutlet" *ngComponentOutlet="options.componentType"></ng-container>
<button (click)="showInfo()">Info</button>

2. 在组件类中通过ViewChild获取实例
   使用ViewChild装饰器获取模板变量对应的组件引用，从中提取实例：

import { Component, ViewChild, Type } from '@angular/core';
import { DisplayOptions } from './your-path';

@Component({
  selector: 'app-dynamic-component-host',
  templateUrl: './dynamic-component-host.component.html'
})
export class DynamicComponentHostComponent {
  options!: DisplayOptions<any>;

  @ViewChild('componentOutlet') componentOutlet!: { componentRef: { instance: any } };

  showInfo() {
    const componentInstance = this.componentOutlet.componentRef.instance;
    this.options.onClickInfo(componentInstance);
  }
}

3. 类型安全优化（可选）
   如果需要保留类型约束，可使用泛型定义组件类：

import { Component, ViewChild, Type } from '@angular/core';
import { DisplayOptions } from './your-path';

@Component({
  selector: 'app-dynamic-component-host',
  templateUrl: './dynamic-component-host.component.html'
})
export class DynamicComponentHostComponent<TComponent> {
  options!: DisplayOptions<TComponent>;

  @ViewChild('componentOutlet') componentOutlet!: { componentRef: { instance: TComponent } };

  showInfo() {
    this.options.onClickInfo(this.componentOutlet.componentRef.instance);
  }
}

完成上述修改后，点击“Info”按钮即可将动态创建的组件实例正确传入onClickInfo函数。

内容的提问来源于stack exchange，提问作者F-H