ReferenceError: HTMLElement 未在 TypeScript 中定义

Question

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

异常：调用节点模块失败并出现错误：预渲染因错误而失败：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文件

我不确定这是否可以帮助您解决问题，但可能值得尝试

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

注释链触发的其他思想-与原始问题无关

使用去抖动的Rx运算符来指示打字结束

如果您需要用一种简单而优雅的方式来告知输入结束，则可以考虑使用Rx和debounce操作符。 这个想法是从前端元素（在我看来是输入元素）的事件流中创建一个Observable，并在指定的范围内未从输入流中收到新值时，使用debounce来发出事件。多少时间。 您可以查看这些链接以了解更多详细信息（ RxJS.Observable防反跳功能是什么？ ， https: //blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html ）-在线有更多示例

组件之间的通讯

我了解您有2个组件需要沟通。 具体来说， “侦听器”需要告诉“其他组件”打字已经完成。

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

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

如果用户界面很复杂，您可以考虑按照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,
    ...
  },
  ...
}