ReferenceError: HTMLElement ist nicht in TypeScript definiert

Question

Ich bin neu in TypeScript, und ehrlich gesagt, mache ich das vielleicht falsch. Aber ... Ich versuche einen "KeyUp Listener" für Textboxen zu erstellen, die "benachrichtigen" wenn der Benutzer die Eingabe beendet hat. Aber wenn ich versuche, um die Klasse zu registrieren, erhalte ich folgende Fehlermeldung:

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: HTMLElement is not defined

ANMELDUNG:

// 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() { } 
} 

NOTIFIER wie folgt aussieht:

// 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

Some Vor einiger Zeit hatte ich ein Problem damit, Typescript einige grundlegende DO zu erkennen M-Klassen, die

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

gelöst wurde hinzugefügt Datei

tsconfig.json Ich bin nicht sicher, ob dies der Fall helfen kann, aber es kann sich lohnen,

versucht ====== ================================================= ==================

ZUSÄTZLICHE GEDANKEN DER KOMMENTAR CHAIN ​​AUSGELÖSTE - NICHT auf die ursprüngliche Frage RELATED

Verwendung von debounce Rx Bediener zu signalisieren, End-of-Eingabe

Wenn Sie Ende der Eingabe auf einfache und elegante Art und Weise signalisieren müssen, können Sie zu prüfen, Rx und die debounce zu verwenden Operator. Die Idee ist, ein Observable aus dem Event-Stream des Front-End-Elements (in Ihrem Fall das Input-Element) zu erstellen und debounce zu verwenden, damit ein Event ausgelöst wird, wenn innerhalb eines angegebenen Wertes kein neuer Wert vom Input-Stream empfangen wurde Zeitraum. Sie können sich für weitere Informationen zu diesen Links sehen (What does RxJS.Observable debounce do?, https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html) - viele weitere Beispiele online

Kommunikation zwischen den Komponenten

ich sind verstehen Sie haben zwei Komponenten, die miteinander kommunizieren müssen. Speziell der "Listener" muss die "andere Komponente", dass die Eingabe beendet ist zu erzählen.

Wenn die „andere Komponente“ enthält immer die „Zuhörer“ Sie können @Output verwenden, um Ausgabeereignisse zu definieren, die die „Zuhörer“ emittieren kann und die „andere Komponente“ kann hören.

Wenn die „Zuhörer“ wird nicht durch die „andere Komponente“ enthalten, dann ist die Nutzung eines Dienstes kann zu kommunizieren, auch in Betracht gezogen werden, wenn Sie müssen auch bedenken, dass Dienste sind Singletons (zumindest innerhalb ihrer Umfang).Wenn Sie ein Singleton verwenden, bedeutet dies, dass Sie, wenn Sie mehr als ein Eingabefeld für das Ende der Eingabe verwenden möchten, herausfinden müssen, wie Sie den Singleton-Dienst mit den vielen Eingaben abbilden.

Bei der UI-Komplex ist, können Sie einen zentralen Speicher wie pro redux Muster (redux store Muster verfügbar sind in Angular durch https://github.com/ngrx/store oder https://github.com/angular-redux/store zu verwenden betrachten zu - dies ist ein interesting link, die Vor- und Nachteile eines redux-Store erklärt basierte Architektur)