我正在嘗試制作一個有角度的彈出框。目前有兩個組件和一個指令。當我點擊我的按鈕時，我收到一條錯誤消息錯誤類型錯誤：無法讀取未定義的屬性“openPopover”如何從指令中獲取對父級的引用，然后從該父級獲取子級？因此，點擊路徑如下所示：[open-popover] / <map-popover> / <map-popover-content>app.component.html<mat-popover>  <mat-popover-content>    <p>Hello World</p>  </mat-popover-content>  <button mat-flat-button open-popover color="primary">Add Debt</button></mat-popover>popover.component.ts@Component({  selector: 'mat-popover',  template: '<ng-content></ng-content>',  styleUrls: ['./popover.component.scss']})export class MatPopoverComponent {  @ViewChild(MatPopoverContentComponent)  public content: MatPopoverContentComponent  public open() {    this.content.openPopover()  }}內容.component.ts@Component({  selector: 'mat-popover-content',  template: `<ng-template #popoverContent>    <ng-content></ng-content>  </ng-template>`,  styleUrls: ['./content.component.scss']})export class MatPopoverContentComponent {  @ViewChild('popoverContent')  public template: TemplateRef<any>  public constructor(public dialog: MatDialog) { }  openPopover(): void {    this.dialog.open(this.template, {      hasBackdrop: false    })  }}open.directive.ts@Directive({  selector: '[open-popover]'})export class OpenPopoverDirective {  public constructor(@Host() private popover: MatPopoverComponent) { }  @HostListener('click')  public onClick() {    this.popover.open()  }}