使用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。