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);
}