【Angular 4】响应式编程

Rxjs?

响应式编程主要是通过观察者模式实现，在Angular中的Rxjs即是它的具体实现。它们的关系如下?

这个图只是简单的数据流，实际上，所有事物都可以用流处理，比如页面上的按钮点击事件：

import {Observable} from 'rxjs/';

let button = document.querySelector('button');

Observable.fromEvent(button,'click');

使用formControl来监听输入的值，并用流的方式处理（打印）：

<!--响应式编程-->
<input [formControl]="formControl">

注意：要使用 [formControl]需要在 app.module.ts 中引入模块 ReactiveFormsModule

import {FormControl} from '@angular/forms';

protected formControl: FormControl = new FormControl();

constructor() {
  this.formControl.valueChanges
  .debounceTime(500).subscribe(bookname => this.print(bookname));
  }

模板变量?

模板变量是在html标签上使用 # 开头来定义的变量，它代表html元素本身。

< !--模版中-->
<input (keyup)="onKeyUp($event)">
<input #iValue (keyup)="onKeyUp(iValue.value)">

 // 控制器
 onKeyUp(param: any) {
   let iInput;
   try {
     iInput = param.target.value;
   } catch (e) {
     iInput = param;
   }
   console.log(iInput);
 }