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,
    ...
  },
  ...
}