使用Observable-Angular 2在控制檯打印數據

Question

試圖學習角度2中的Observable's，並且我無法像從文本輸入字段中打印鍵入輸入那樣工作。這裏是我的app.component.ts的代碼

import {Component} from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 

@Component({ 
    selector: 'my-app', 
    template: `  
       <input id="search" type="text" class="form-control" placeholder="Search"/> 
    ` 
}) 
export class AppComponent{ 
    constructor() { 

     var input = $('#search'); 

     var keyups = Observable.fromEvent(input, 'keyup'); 

     keyups.subscribe(data => console.log(data)); 
    } 
} 

Answer 1

這是您試圖實現的Angular 2版本。

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; 
    import { Observable } from 'rxjs/Rx'; 

    @Component({ 
    selector: 'my-app', 
    template: `  
       <input #search id="search" type="text" class="form-control" placeholder="Search"/> 
     ` 
    }) 
    export class AppComponent { 
    @ViewChild('search') search: ElementRef; 

    constructor() { 
    } 

    ngAfterViewInit() { 
     Observable.fromEvent(this.search.nativeElement, 'keyup') 
     .subscribe((data: KeyboardEvent) => console.log(data.key)); 
    } 
    } 

主要變化是使用模板語法和ViwChild來獲取組件中的元素。有關更多信息，請參閱文檔here。另外this博客文章有助於避免開始時的常見錯誤。如果要避免添加到列表中的第六個錯誤，我認爲它應該不使用jQuery與Angular2。