从模板中获取元素兄弟组件 ng-content

Question

我正在尝试制作一个有角度的弹出框。目前有两个组件和一个指令。

当我点击我的按钮时，我收到一条错误消息

错误类型错误：无法读取未定义的属性“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()

  }

}

Answer 1

用这里替换ContentChild装饰器，它应该可以工作。ViewChild@ViewChild(MatPopoverContentComponent)解释您应该区分 Light DOM 和 Shadow DOM：零件@Component({&nbsp; selector: 'mat-popover',&nbsp; template: `<ng-content></ng-content>`, <--- Shadow DOM&nbsp; styleUrls: ['./popover.component.scss']})export class MatPopoverComponent {}消费者<mat-popover>&nbsp; <!-- Light DOM starts -->&nbsp; <mat-popover-content>&nbsp; &nbsp; <p>Hello World</p>&nbsp; </mat-popover-content>&nbsp; <button mat-flat-button open-popover color="primary">Add Debt</button>&nbsp; <!-- Light DOM ends--></mat-popover>所以在 Angular 中，我们使用 ViewChild/ren 查询 Shadow DOM 中的元素，使用 ContentChild/ren 查询 Light DOM 中的元素