如何获取组件引用？在ComponentB中通过函数打开ComponentA的问题

错误原因 #

你在模板里直接用content变量，但ComponentB类里没定义这个属性，而且<app-A>是组件实例，不是TemplateRef类型，所以会抛出Property 'content' does not exist on type componentB的错误。

方案1：通过@ViewChild控制组件显示/隐藏 #

这种方式不用常规父子组件传值逻辑，直接在ComponentB里获取ComponentA实例，控制它的显示状态。

先修改ComponentA，添加显示控制属性 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-A',
  template: `<div *ngIf="isVisible">hello world</div>`
})
export class ComponentA {
  isVisible = false; // 控制组件显示的开关
}

ComponentB.html 调整模板引用 #

<app-A #content></app-A>

<button (click)="open(content)">Open A</button>

ComponentB.ts 获取组件实例并控制显示 #

import { Component, ViewChild } from '@angular/core';
import { ComponentA } from './component-a.component';

@Component({
  selector: 'app-B',
  templateUrl: './component-b.html'
})
export class ComponentB {
  // 通过模板引用变量获取ComponentA实例
  @ViewChild('content') content!: ComponentA;

  open(component: ComponentA) {
    component.isVisible = true;
    // 这里可以调用你的服务逻辑
  }
}

方案2：用服务动态创建ComponentA（完全脱离模板预渲染） #

如果不想在ComponentB的模板里提前写<app-A>标签，可以用Angular的组件工厂动态创建组件，这种方式完全通过函数触发创建，不需要预渲染组件。

第一步：创建共享服务 #

import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
import { ComponentA } from './component-a.component';

@Injectable({ providedIn: 'root' })
export class ComponentService {
  constructor(
    private resolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {}

  createComponentA() {
    // 生成ComponentA的组件工厂
    const factory = this.resolver.resolveComponentFactory(ComponentA);
    // 创建组件实例
    const componentRef = factory.create(this.injector);
    // 将组件挂载到应用视图中
    this.appRef.attachView(componentRef.hostView);
    // 获取组件DOM元素并添加到页面
    const domElem = (componentRef.hostView as any).rootNodes[0] as HTMLElement;
    document.body.appendChild(domElem);
    // 返回组件实例，方便后续销毁或操作
    return componentRef;
  }
}

ComponentB.ts 调用服务创建组件 #

import { Component } from '@angular/core';
import { ComponentService } from './component.service';

@Component({
  selector: 'app-B',
  templateUrl: './component-b.html'
})
export class ComponentB {
  constructor(private componentService: ComponentService) {}

  open() {
    // 调用服务动态创建ComponentA
    const componentRef = this.componentService.createComponentA();
    // 这里可以调用你的服务逻辑
    // 如果需要销毁组件，后续可调用 componentRef.destroy()
  }
}

ComponentB.html 简化模板 #

<button (click)="open()">Open A</button>

两种方案对比 #

• 方案1操作简单，适合需要预加载组件但临时隐藏的场景，性能开销小。
• 方案2更灵活，组件完全动态生成，不需要在模板中提前声明，适合按需加载的场景。

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