使用ViewChild调用子组件方法失败，报Cannot read property 'popMessage' of undefined

首先得明确为什么会出现Cannot read property 'popMessage' of undefined这个错误：
你的<app-modal-popup>是放在<router-outlet>标签外面的，而HomeComponent是渲染在router-outlet内部的页面组件——这俩根本不在同一个组件模板层级里！@ViewChild('appModal')只能获取当前组件模板内的子组件实例，所以运行时appModal自然是undefined，IDE的自动补全只是类型提示，不代表实例真的存在。

接下来给你两种可行的解决方案，根据你的场景选：

方案一：如果弹窗仅在首页使用，直接调整模板结构 #

把<app-modal-popup>移到HomeComponent的模板里，并且加上你定义的模板引用变量#appModal：

<!-- HomeComponent的模板文件 -->
<app-modal-popup #appModal></app-modal-popup>

<!-- 首页其他内容 -->
<div class="home-content">...</div>

这样@ViewChild('appModal')就能正确获取到子组件实例，调用popMessage方法就不会报错了。

方案二：如果弹窗是全局共用（所有页面都要用），用Angular服务实现通信 #

这是Angular处理全局组件通信的标准方式，组件之间完全解耦，更符合框架设计理念：

1. 创建全局弹窗服务 #

先新建一个ModalService（比如放在src/app/services/modal.service.ts）：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ModalService {
  // 用Subject来传递消息
  private messageTrigger = new Subject<string>();
  // 暴露可订阅的Observable
  message$ = this.messageTrigger.asObservable();

  // 对外提供的触发方法
  showPopupMessage(message: string) {
    this.messageTrigger.next(message);
  }
}

2. 在弹窗组件中订阅服务消息 #

修改ModalPopupComponent，注入服务并订阅消息，收到消息后调用自身的popMessage方法：

import { Component, OnInit } from '@angular/core';
import { ModalService } from '../../services/modal.service';

@Component({
  selector: 'app-modal-popup',
  templateUrl: './modal-popup.component.html',
  styleUrls: ['./modal-popup.component.css']
})
export class ModalPopupComponent implements OnInit {
  constructor(private modalService: ModalService) {}

  ngOnInit(): void {
    // 订阅服务的消息
    this.modalService.message$.subscribe(message => {
      this.popMessage(message);
    });
  }

  popMessage(message: string) {
    // 这里写你的弹窗显示逻辑
    console.log('弹窗显示内容:', message);
  }
}

3. 在首页组件中通过服务触发弹窗 #

修改HomeComponent，注入服务，在点击事件里调用服务的方法：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ModalService } from '../../services/modal.service';

export class HomeComponent implements OnInit, AfterViewInit {
  // 注入服务
  constructor(private modalService: ModalService) {}

  footerLinkHandler(link){
    console.log('link', link );
    // 通过服务通知弹窗显示消息
    this.modalService.showPopupMessage(link);
    return false;
  }
}

这种方式不管弹窗放在模板的哪个位置，只要服务是全局提供的，就能正常工作，而且组件之间没有直接依赖，维护起来更方便。

不推荐的方案：直接跨层级获取根组件实例 #

如果硬要通过组件实例调用（非常不推荐，耦合性极强），可以把弹窗放在根组件（比如AppComponent）里，然后通过AppComponent的实例来获取弹窗，但这种方式会让组件之间的依赖关系变得混乱，除非特殊情况否则别用。

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