为何ViewChildren与ngComponentOutlet结合无结果？求替代方案

这个问题我之前也碰到过！用ngComponentOutlet动态渲染的组件确实没法通过@ViewChildren直接获取，因为这类动态组件并不在当前组件的常规视图查询范围内。下面给你两种可行的解决方案，结合你的代码来具体说明：

方案一：通过共享服务让子组件主动注册 #

这种方式不需要修改渲染逻辑，只需要通过一个共享服务让子组件在初始化时把自己注册到父组件可访问的地方：

1. 创建组件注册服务 #

import { Injectable } from '@angular/core';
import { HomeComponent } from './home.component';

@Injectable({ providedIn: 'root' })
export class ComponentRegistryService {
  private registeredComponents: HomeComponent[] = [];

  // 注册子组件
  register(component: HomeComponent) {
    this.registeredComponents.push(component);
  }

  // 注销子组件（防止内存泄漏）
  unregister(component: HomeComponent) {
    this.registeredComponents = this.registeredComponents.filter(c => c !== component);
  }

  // 获取所有已注册的组件
  getComponents(): HomeComponent[] {
    return [...this.registeredComponents];
  }
}

2. 在子组件中注入服务并完成注册/注销 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ComponentRegistryService } from './component-registry.service';

@Component({
  selector: 'app-home',
  template: '<p>Home Component Content</p>'
})
export class HomeComponent implements OnInit, OnDestroy {
  constructor(private registryService: ComponentRegistryService) {}

  ngOnInit() {
    // 组件初始化时注册自己
    this.registryService.register(this);
  }

  ngOnDestroy() {
    // 组件销毁时注销自己
    this.registryService.unregister(this);
  }
}

3. 在父组件中通过服务获取子组件实例 #

import { Component, AfterViewInit } from '@angular/core';
import { HomeComponent } from './home.component';
import { ComponentRegistryService } from './component-registry.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  pageSections = [ HomeComponent, HomeComponent ];

  constructor(private registryService: ComponentRegistryService) {}

  ngAfterViewInit() {
    // 这里就能拿到所有通过ngComponentOutlet渲染的HomeComponent实例了
    console.log(this.registryService.getComponents());
  }
}

模板保持你原来的写法即可：

<div *ngFor="let pageSection of pageSections">
  <ng-container *ngComponentOutlet="pageSection"></ng-container>
</div>

方案二：手动使用ViewContainerRef创建组件（替代ngComponentOutlet） #

如果你不想用服务，也可以直接通过ViewContainerRef手动创建组件，这样就能直接捕获到组件实例：

1. 修改父组件模板，添加模板容器 #

<div *ngFor="let pageSection of pageSections; let i = index">
  <ng-template #componentContainer></ng-template>
</div>

2. 在父组件中获取容器并创建组件 #

import { Component, AfterViewInit, ViewChildren, QueryList, ViewContainerRef } from '@angular/core';
import { HomeComponent } from './home.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  pageSections = [ HomeComponent, HomeComponent ];
  @ViewChildren('componentContainer', { read: ViewContainerRef }) 
  componentContainers: QueryList<ViewContainerRef>;
  
  // 用来存储所有创建的组件实例
  componentInstances: HomeComponent[] = [];

  ngAfterViewInit() {
    this.componentContainers.forEach((container, index) => {
      // 手动创建组件并获取实例
      const componentRef = container.createComponent(this.pageSections[index]);
      this.componentInstances.push(componentRef.instance);
    });
    console.log(this.componentInstances);
  }
}

为什么原来的@ViewChildren拿不到组件？ #

Angular的@ViewChildren只能查询到模板中静态声明或者通过当前组件的ViewContainerRef直接创建的组件实例。而ngComponentOutlet是通过内部指令逻辑创建组件的，这些组件的视图容器不属于当前组件的直接视图树，所以常规查询方式无法捕获到它们。

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