javascript - 为什么 nativeElement 未定义？

Question

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

    <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，这样我就可以在关闭点击时检查事件目标是否在 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 生命周期钩子(Hook)中也是如此。

Answer 1

正如关于 template reference variables 的 Angular 文档中提到的:

<input #phone placeholder="phone number">

<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

In most cases, Angular sets the reference variable's value to the element on which it was declared. In the previous example, phone refers to the phone number box. The phone button click handler passes the input value to the component's callPhone method.

---

在您的代码中，如果您将 navBtn 作为输入值传递给 settings-menu:

<settings-menu [btn]="navBtn" ...>

btn 将设置为 #navBtn 引用的 DOM 元素。您可以将 btn 变量定义为 settings-menu 组件中的 HTMLElement:

@Input("btn") btn: HTMLElement;

---

另一方面，如果您在其自己的组件中使用 @ViewChild("navBtn") 检索元素，那么您将获得一个 ElementRef，其中包含一个 nativeElement 指向 DOM 元素的属性。