angular - typescript 错误 : TS2314: Generic type 'ElementRef' requires 2 type argument(s)

Question

我使用的是 Angular 5.x 模板，但我使用 https://update.angular.io/ 将其升级到 Angular 6指导。现在我的构造函数中有这个错误

Typescript Error: TS2314: Generic type 'ElementRef<T, any>' requires 2 type argument(s)

我的代码:

import { Component, Input, Output, EventEmitter, ElementRef, HostListener }          from '@angular/core';

@Component({
  selector: 'sidebar',
  templateUrl: './sidebar.component.html'
})

export class SidebarComponent {

    @HostListener('document:click', ['$event'])
  clickout(event) {
    if(!this.eRef.nativeElement.contains(event.target)) {
          this.hideMobileSidebar.emit(true);
    }
  }

  constructor(private eRef: ElementRef) {
  }

...

我在以前的 Angular 版本 5 中没有这个错误。

发生了什么变化？我不明白文档:( https://angular.io/api/core/ElementRef

Answer 1

他们改变了 nativeElement来自 any 的属性(property)到 generic type .

如果您想要快速修复，请更改 eRef: ElementRef至 eRef: ElementRef<any>这与以前的版本相同。

此更改意味着您现在可以为被引用的 DOM 元素定义类类型。这将有助于 TypeScript 编译以强制执行该类型，以及 IDE 自动完成功能。

有很多不同的类类型，但是基类Element用于大多数 DOM 元素。如果你知道它会是 <input>您可以使用的元素 HTMLInputElement举个例子。

在您的示例中，组件正在为构造函数注入(inject)它的 DOM 元素。这将是一个通用的 HTMLElement .所以代码会像这样更新:

constructor(private eRef: ElementRef<HTMLElement>) {
     const title = eRef.nativeRef.title;
     // ^^^ the above title property is now verified by TypeScript at compile-time
}