ReferenceError : HTMLElement가 TypeScript에 정의되어 있지 않습니다.

Question

저는 TypeScript를 처음 접했고 솔직히이 잘못을 저 지르려고합니다. 하지만 ... 사용자가 타이핑을 멈추었을 때 "알리는"텍스트 상자 용 "KeyUp Listener"를 만들려고합니다.

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

등록 :

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

알리미 보이는 LIKE :

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

일부 I 클래스를 등록하려고 할 때, 나는 다음과 같은 오류가 발생합니다 나는 Typescript가 기본 DO를 인식하도록하는데 문제가있었습니다. 나는이 사건을 도울 수 있는지 아니에요 파일을

을 tsconfig.json하는

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

를 추가 해결 된 M 클래스,하지만

을 시도 가치가있을 수 있습니다 ====== ========================================================================================================== 주석 체인에 의해 트리거 ==================

추가의 생각 - 원래의 질문

관련이없는 디 바운스 수신 연산자의

사용이 끝 입력하면 간단하고 우아한 방법으로 입력의 끝을해야하는 경우

을 알리기 위해, 당신은 수신과 debounce을 사용하는 것이 좋습니다 운영자. 아이디어는 Front End 엘리먼트 (당신의 경우 Input 엘리먼트와 같음)로부터 오는 이벤트 스트림에서 Observable을 생성하고 지정된 값 내에서 입력 스트림으로부터 새로운 값을받지 못하면 debounce을 사용하여 이벤트를 발생시키는 것입니다 시간. 당신은 자세한 내용은 (What does RxJS.Observable debounce do?, https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html)에 대한 이러한 링크를 볼 수 있습니다 - 더 많은 예제 구성 요소

이해 사이

통신 온라인으로 사용할 수 있습니다 당신은 의사 소통을 할 필요가 2 개 구성 요소가 있습니다. 특히 "청취자"은 "기타 구성 요소"에게 타이핑이 끝났음을 알릴 필요가 있습니다.

"다른 구성 요소가" 항상 "청취자" 당신이 "청취자"가 방출 할 수 있으며 "다른 구성 요소"가들을 수 출력 이벤트를 정의하는 @Output을 사용할 수 있습니다 포함되어있는 경우. "청취자"가 "다른 구성 요소에"에 포함되어 있지 않은 경우, 의사 소통을 할 수있는 서비스의 이용도 서비스가 적어도 내 싱글 톤 (것을 고려하는 당신이 경우에도 고려 될 수있다

자신의 범위).싱글 톤을 사용한다는 것은 Singleton 서비스를 많은 Inputs와 매핑하는 방법을 알아 내야 할 필요가 있기 때문에 End-of-Typing에 대해 듣고 싶은 Input 필드가 두 개 이상있는 경우를 의미합니다. UI를 복잡 경우

, 당신은 https://github.com/ngrx/store 또는 https://github.com/angular-redux/store을 통해 REDUX 패턴 (REDUX 저장소 패턴이 각도에서 사용할 수에 따라 중앙 저장소를 사용하도록 고려할 수 있습니다 -이 REDUX 매장의 장점과 단점을 설명하는 interesting link입니다