Angular Popover报错：无法读取openPopover属性，如何获取父子组件引用？

你遇到的这个错误主要有两个核心原因，我来一步步拆解并给出修复方案：

问题1：MatPopoverComponent无法获取投影的MatPopoverContentComponent #

你的MatPopoverComponent里用了@ViewChild(MatPopoverContentComponent)来获取内容组件，但mat-popover-content是通过<ng-content>投影到mat-popover组件中的，而@ViewChild只能查找当前组件自己模板里的元素/组件，无法访问投影进来的内容。

修复方案：用@ContentChild替代@ViewChild #

@ContentChild专门用于访问通过<ng-content>投影到组件中的子组件或元素，正好匹配你的场景。修改popover.component.ts：

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { MatPopoverContentComponent } from './content.component';

@Component({
  selector: 'mat-popover',
  template: '<ng-content></ng-content>',
  styleUrls: ['./popover.component.scss']
})
export class MatPopoverComponent implements AfterContentInit {
  // 改用@ContentChild获取投影的内容组件
  @ContentChild(MatPopoverContentComponent) public content: MatPopoverContentComponent;

  ngAfterContentInit() {
    // 可选：在这里确认内容组件是否成功获取
    console.log('Popover content initialized:', this.content);
  }

  public open() {
    // 增加空值判断，避免再次出现undefined错误
    if (!this.content) {
      console.error('MatPopoverContentComponent未找到，请检查组件结构');
      return;
    }
    this.content.openPopover();
  }
}

问题2：OpenPopoverDirective无法正确获取父级MatPopoverComponent引用 #

你在指令的构造函数里用@Host()注入MatPopoverComponent，但@Host()指向的是指令所在的元素（也就是按钮本身），而按钮是mat-popover的子元素，所以这样注入不到父组件的实例。

修复方案：用@SkipSelf() + @Optional()注入父级组件 #

通过@SkipSelf()跳过当前指令的注入器，去父级注入器中查找MatPopoverComponent实例，@Optional()是为了防止组件结构错误时出现注入失败的报错（可选，但更健壮）。修改open.directive.ts：

import { Directive, HostListener, Optional, SkipSelf } from '@angular/core';
import { MatPopoverComponent } from './popover.component';

@Directive({
  selector: '[open-popover]'
})
export class OpenPopoverDirective {
  // 注入父级的MatPopoverComponent实例
  constructor(@Optional() @SkipSelf() private popover: MatPopoverComponent) {}

  @HostListener('click') public onClick() {
    // 增加空值判断
    if (!this.popover) {
      console.error('MatPopoverComponent未找到，请确保按钮在<mat-popover>内部');
      return;
    }
    this.popover.open();
  }
}

为什么这样能解决问题？ #

• @ContentChild和@ViewChild的核心区别：前者针对投影内容（<ng-content>里的元素），后者针对组件自身模板内的元素。你的mat-popover-content是从父组件投影进来的，所以必须用@ContentChild。
• @SkipSelf()的作用：Angular的注入器是分层的，指令所在的按钮属于mat-popover组件的子节点，所以父级注入器里存在MatPopoverComponent的实例，用@SkipSelf()就能跳过当前指令的注入器，找到父级的实例。

经过这两处修改，点击按钮时就能正确触发openPopover方法，不会再出现undefined的错误了。

内容的提问来源于stack exchange，提问作者Get Off My Lawn