Angular 8：在Service中创建动态组件报错：Cannot read property 'createComponent' of undefined

这问题的核心原因很明确：@ViewChild装饰器只能在组件或指令中使用，Service是没有视图上下文的，所以你在Service里声明的newsHost永远会是undefined。组件里能正常工作是因为组件有自己的模板视图，@ViewChild可以定位到模板里的容器元素，但Service完全脱离视图层级，没法直接获取到DOM/视图容器的引用。

下面是具体的修复方案：

步骤1：在组件中获取视图容器引用并传递给Service #

首先在你的AppComponent模板里确保有标记为#container的容器元素（比如一个<ng-template>或者<div>），然后在组件类中用@ViewChild获取它的ViewContainerRef，之后调用Service方法时把这个引用传进去。

修改后的AppComponent代码：

import { GenService } from './gen.service';
import { AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';
  @ViewChild('container', { static: false }) container: ViewContainerRef;

  constructor(private gen: GenService) { }

  ngAfterViewInit() {
    // 把容器引用传递给Service的方法
    this.gen.createComp("yo", this.container);
  }
}

对应的app.component.html需要添加容器元素：

<ng-template #container></ng-template>

步骤2：修改Service，移除无效的@ViewChild并接收容器引用 #

在Service里删掉原来的@ViewChild声明，让createComp方法接收外部传入的ViewContainerRef，用这个引用创建组件。

修改后的GenService代码：

import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Injectable({
  providedIn: 'root'
})
export class GenService {
  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  createComp(message: string, container: ViewContainerRef) {
    // 先清空容器（可选，根据需求决定）
    container.clear();
    
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    const componentRef = container.createComponent(componentFactory);
    
    // 如果需要给子组件传递数据，比如message
    componentRef.instance.message = message;
  }
}

额外说明 #

• 如果你的ChildComponent需要接收输入参数，记得在组件类里定义@Input()属性，比如@Input() message: string;，这样就能在创建组件后给它赋值。
• 为什么static: false？因为我们在ngAfterViewInit里访问容器，这时候视图已经初始化完成，用static: false更合适（Angular 8+推荐的写法）。

这样修改后，Service就能通过组件传递的视图容器引用正常创建动态组件了，不会再出现undefined的错误。

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