web-dev-qa-db-ja.com

Typescriptエラー：TS2314：ジェネリック型 'ElementRef <T、any>'には2つの型引数が必要です

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

angulartypescriptcompiler-errorsangular6
5
FrancoVP

問題を修正します。

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のインストールと何の関係があるのか​​理解していませんが、それが私がした唯一のことです。

1
FrancoVP

彼らは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
}
4
Reactgular