参考错误：HTMLElement 未在 TypeScript 中定义

Question

我是 TypeScript 的新手，坦率地说，我可能做错了。但是......我正在尝试为文本框创建一个“KeyUp Listener”，当用户停止输入时，它会“通知”。但是，当我尝试注册该课程时，出现以下错误：

异常：调用节点模块失败，错误：预渲染失败，因为错误：ReferenceError：HTMLElement 未定义

登记：

// MODULES
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// COMPONENTS
import { AppComponent } from './components/app/app.component'
import { HeaderComponent } from './components/shared/components/shared-header.component';
import { SampleIndexComponent } from './components/samples/sample.index.component';
import { SampleFormComponent } from './components/samples/sample.form.component';
import { StatusFilterComponent } from './components/samples/filters/status-filter.component';
import { AuthorFilterComponent } from './components/samples/filters/author-filter.component';

// LISTENERS
import { TextboxKeyUpListener } from "./components/shared/services/textbox.keyup.listener";

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HeaderComponent,
        SampleIndexComponent,
        StatusFilterComponent,
        AuthorFilterComponent,
        SampleFormComponent
    ],
    imports: [
        UniversalModule, // <-- Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'samples', pathMatch: 'full' },
            { path: 'samples', component: SampleIndexComponent },
            { path: 'form', component: SampleFormComponent },
            { path: '**', redirectTo: 'samples' }
        ])
    ],
    providers: [AuthorFilterNotifier, StatusFilterNotifier, TextboxKeyUpListener]
})
export class AppModule
{
    constructor() { }   
}

通知程序看起来像：

// MODULES
import { Injectable, Inject } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class TextboxKeyUpListener {

    // CONSTRUCTORS
    constructor(private textbox: HTMLInputElement)
    {
        this.init();
    }

    // PROPERTIES - private
    private typingTimer: NodeJS.Timer;
    private typingTimerInterval: number = 1000;
    private notifyDoneTyping = new Subject<string>();

    // PROPERTIES - public
    public notifyDoneTyping$ = this.notifyDoneTyping.asObservable();

    // METHODS - public
    private keyUp(ev: KeyboardEvent)
    {
        global.clearTimeout(this.typingTimer);
        if(this.textbox.value)
            this.typingTimer = global.setTimeout(this.notify, this.typingTimerInterval);
    }

    // METHODS - private
    private init()
    {
        this.textbox.onkeyup = this.keyUp;
    }

    private notify()
    {
        this.notifyDoneTyping.next(this.textbox.value);
        console.log("Done Typing")
    }
}

Answer 1

前段时间我在让 Typescript 识别一些基本的 DOM 类时遇到问题，已解决添加

"lib": [
  "es2016",
  "dom"
]

到 tsconfig.json 文件

我不确定这对您的情况有帮助，但可能值得一试

================================================== ========================

由评论链引发的其他想法 - 与原始问题无关

使用 debounce Rx 运算符来表示打字结束

如果您需要以一种简单而优雅的方式表示输入结束，您可能需要考虑使用Rx和debounce运算符。这个想法是从来自前端元素（在你的情况下我猜是 Input 元素）的事件流中创建一个 Observable 并debounce在指定数量内没有从输入流接收到新值时使用它发出一个事件时间。您可以查看这些链接以获取更多详细信息（RxJS.Observable 去抖动做什么？，https: //blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html ) - 在线提供更多示例

组件之间的通信

我知道您有 2 个需要通信的组件。具体来说，“侦听器”需要告诉“其他组件”键入已完成。

如果“其他组件”始终包含“侦听器”，则您可以使用它@Output来定义“侦听器”可以发出且“其他组件”可以侦听的输出事件。

如果“侦听器”不包含在“其他组件”中，那么即使您还必须考虑服务是单例（至少在其范围内），也可以考虑使用服务进行通信。成为单例意味着如果您有多个输入字段要收听打字结束，那么您需要弄清楚如何将单例服务映射到许多输入。

如果 UI 很复杂，您可以考虑按照 redux 模式使用中央存储（redux 存储模式可通过https://github.com/ngrx/store或https://github.com/angular-在 Angular 中获得）redux/store - 这是一个有趣的链接，解释了基于 redux-store 的架构的优缺点）

Answer 2

也许这实际上是一个错误eslint，而不是一个typescript错误。

browser对我来说，它通过添加到 上的环境列表来完全解决.eslintrc.js。

{
  ...
  env:    {
    ...
    browser: true,
    ...
  },
  ...
}