Angular 4 제5 장 응답 식 프로 그래 밍

1. 관찰자 모드 와 Rxjs
(1) 관찰 대상, 초기 화 시 관찰자 대상 등록
(2) 관찰 자 는 관찰 대상 에 변화 가 발생 하여 관찰 자 를 호출 하 는 방법 에 따라 해당 하 는 처 리 를 한다.

import {Observable} from "rxjs";  //javascript       ，angular      
var subscription=Observable.from([1,2,3,4])  //   ，       ，      
.filter((e)=>e%2==0)  //        
.map((e)=>e*e)        //     
.subscribe(            //   ，   
  e=>conlose.log(e),   //       
  error=>console.log(error), //       
  ()=>console.log("   ")  
)；

(1) 관찰 대상 Observable (흐름): 값 이나 사건 의 집합 을 나타 낸다.
(2) 관찰자 Observer: 반전 함수 의 집합, 그 는 Observable 에 의 해 보 낸 값 을 어떻게 받 는 지 알 고 있다.
(3) 구독 구독 구독: 관찰 대상 표시
(4) 연산 자: Operator: 순수한 함수 로 개발 자가 함수 프로 그래 밍 방식 으로 집합 을 처리 할 수 있 도록 합 니 다.
응답 식 프로 그래 밍 은 비동기 데이터 흐름 프로 그래 밍 이다.
어떻게 응답 식 프로 그래 밍 으로 브 라 우 저 이벤트 처 리 를 합 니까?
(1) 표준 DOM 이벤트
(2) 사용자 정의 이벤트
2. 템 플 릿 로 컬 변 수 는 \ # 로 템 플 릿 로 컬 변 수 를 설명 합 니 다. 사용 할 때 \ # 필요 하지 않 습 니 다.

//myField   input  ，      

3. 스 트림 으로 이벤트 처리
예 를 들 어 주식 정 보 를 검색 하 는 것 이다.
     (1) 새로운 모듈 을 도입 합 니 다. 응답 식 프로 그래 밍 모듈 ReactiveForms Module. 이 모듈 은 하나의 대상 FormControl 을 제공 합 니 다. angular 가 폼 처리 에 사용 할 때 자주 사용 하 는 클래스 로 폼 요 소 를 대표 합 니 다. 모든 폼 요 소 는 대응 하 는 FormControl 이미지 가 있 습 니 다. 기본 적 인 상황 에서 폼 요소 값 이 변 할 때FormControl 에서 ValueChange 이벤트 가 발생 합 니 다. 이 이벤트 들 은 구독 가능 한 흐름 을 구성 합 니 다.

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

imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

（2）

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { FormControl } from '@angular/forms';
import 'rxjs/Rx';
@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
  //    searchInput
 searchInput:FormControl=new FormControl();
  constructor() {
      this.searchInput.valueChanges // ，input       
      .debounceTime(500)
      .subscribe(stockCode=>this.getStockInfo(stockCode))
   
    
   }

  ngOnInit() {

  }

  getStockInfo(value:string){
    console.log(value);
 }

}

html:

[formControl] = "searchInput" 으로 input 과 속성 searchInput 을 묶 은 후, input 의 값 이 변 할 때마다 searchInput 은 valuechange 이 벤트 를 발사 합 니 다. 우리 가 해 야 할 일 은 이 이 벤트 를 구독 하 는 것 입 니 다.