小编Yey*_*des的帖子

在我的父组件中,我有一个btn和一个设置菜单指令.我想要做的是将elementref #navBtn作为输入传递到settings-menu中.

    <div #navBtn (click)="toggleNav()" class="header__button header__button--left" id="header_button--left">
      <img class="align-absolute" src="assets/imgs/icon_sandwich.svg">
    </div>
    <settings-menu [btn]="navBtn" [navOpened]="navOpened" (navClosed)="navOpened.next(false)"></settings-menu>
...
@ViewChild('navBtn') navBtn: ElementRef;

我需要这个elementref所以我可以检查事件目标是否在offclick上包含/排除HostListener中的这个元素.

  private _btn: ElementRef;
  @Input('navOpened') navOpened: BehaviorSubject<boolean>;
  @Input('btn')
  set btn(val: ElementRef) {
    this._btn = val;
  }

  get btn() {
    return this._btn;
  }

  @HostListener('document:click', ['$event']) offClick(e: Event) {
    e.stopPropagation();
    console.log('el', this.el.nativeElement, 'btn', this.btn.nativeElement, 'target', e.target);
    if (!this.el.nativeElement.contains(e.target) || this.btn.nativeElement.contains(e.target)) this.closeNav();
  }

但是this.btn返回btn html并且看起来不是elementRef,因为this.btn上的nativeElement总是未定义的,即使在ngAfterViewInit生命周期钩子中也是如此.