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更改为generic type。

如果您想要快速修复，请将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>，现在一切正常。我不知道我的tslint或打字稿安装与angular-cli有什么关系，但这是我唯一要做的。

打字稿错误：TS2314：通用类型＆＃39; ElementRef <t，any =“”>＆＃39;需要2个类型的参数

2 个答案: