为什么 nativeElement 未定义？答案

【问题标题】：Why is nativeElement undefined?为什么 nativeElement 未定义？
【发布时间】：2018-06-03 04:01:42
【问题描述】：

在我的父组件中，我有一个 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，这样我就可以检查事件目标是否在 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 生命周期挂钩中也是如此。

【问题讨论】：

标签： javascript angular typescript

【解决方案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>

在大多数情况下，Angular 将引用变量的值设置为声明它的元素。在前面的示例中，电话指电话号码框。电话按钮点击处理程序将输入值传递给组件的 callPhone 方法。

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

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

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

@Input("btn") btn: HTMLElement;

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

【讨论】：

我知道输入参数 #phone 的类型是 HTMLElement 而不是 ElementRef。