javascript - 使用 Observable 在控制台中打印数据 - Angular 2

Question

试图学习 Angular 2 中的 Observable，但我似乎无法得到像从文本输入字段打印键盘输入这样简单的东西来工作。这是我的 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 一起使用。