打字稿錯誤：TS2314：泛型類型'ElementRef <T，any>'需要2個類型參數

Question

我正在使用Angular 5.x模板，但我使用https://update.angular.io/ guide將其升級到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更改為泛型類型 。

如果您想快速修復， eRef: ElementRef更改為eRef: ElementRef<any> ，這與以前的版本相同。

此更改意味着您現在可以為正在引用的DOM元素定義類類型。 這將有助於TypeScript編譯以強制執行該類型，以及IDE自動完成功能。

有許多不同的類類型，但基類Element用於大多數DOM元素。 如果您知道它將是<input>元素，您可以使用HTMLInputElement作為示例。

在您的示例中，組件正在為構造函數注入它的DOM元素。 這將是一個通用的HTMLElement 。 所以代碼會像這樣更新：

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

Answer 2

我解決了這個問題。

我所做的只是運行npm i @angular-cli --save ，它從版本6.0.7更改為6.0.8，我還全局更新了它。 然后我運行ng update @angular/cli但它不會改變我的package.json中的任何內容。 現在我可以單獨使用ElementRef ，或者使用ElementRef<HTMLElement>或ElementRef<HTMLElement, any> ，現在一切正常。 我不明白angular-cli與我的tslint或typescript安裝有什么關系，但這是我唯一做的事情。