ANGULAR2 Study notes (RXJS Stream)

RxJS Broad and profound, read several articles have not understood.

The scope involved in the function of the response to the development of ... I have a functional smattering, the response is the first time to hear ...

Alas... But the days still have to be ... Mixed up, first.

What I understand at the moment is a very shallow one, which is basically the concept.

1. In some scenarios it works better than promise, and it's good at filtering out things you don't care about.

2. It is composed of the Observer mode + iterator pattern

3. Closely related to time, events, variables

4. There is one thing in the world called "stream" stream, and a stream can represent a change in one thing over a period of time.

For example, there is a value that changes from "I" to "you" in a certain period of time to "he".

And we can observe this flow, so as long as it changes, we'll find and do anything.

5. Stand in the perspective of the viewer, the server pushes the data over, the user interface, the timer is the stream we care about.

Well, take a look at the example.

We create the stream through new Subject. You can also use new Eventemitter or Behaviorsubject. These all inherit the Subject.

Eventemitter is provided by NG2.

Behaviorsubject can fill in the initial value

Import {Subject} from "Rxjs/subject";p rivate textemitter:subjectNew

To change the value in the stream, we use. Next (value), which is the concept of an iterator

KeyUp (value:string) {    this. Textemitter.next (value);}

So the subscription is like this

Ngoninit () {    this. Textemitter        . Debouncetime (+)        . Distinctuntilchanged ()        this. Getdataasync (v));     this. Text$.subscribe (value) = {        console.log (value);    });            

Input KeyUp performance optimization, we usually write a timeout + cleartimeout way, this debouncetime is to do this

500MS notifies observers only after stream update is complete

Distinctuntilchanged is to notify the observer only when the value is different from the last notification

. Map and. Switchmap are used to manipulate values, and this is the same as the Array.map concept.

The difference between. Map and. Switchmap is. Swichmap handles those values that return observeable

Getdataasync (value:string): observable<string>{            new  Subject ();     = = {        console.log ("after 2second")        ; + "final");     );     return subject;}

If we use a map, it will return directly to the object "subject", and if you use Switchmap it will return the response value of this subject object.

<input type= "text" #input (KeyUp) = "KeyUp (input.value)"/><p>{{text$ | Async}}</p>

NG2 provides an async Pipe that listens to the text$ stream on the left. Followed by a $ sign is usually used to indicate that this is a stream.

There is also a common function that is combinelatest

is the ability to listen to multiple streams at the same time, so long as one has a change, all the latest values are published and can be used to implement dependency properties.

@Component ({selector:"Compute-property", Template: '<input type= "text" #input1 (KeyUp) = "Text1.next (input1.value)"/> <input type= "text" #input2 (KeyUp) = "Text2 . Next (Input2.value) "/> {{result$ |Async}} '}) Export class Computepropertycomponent implements OnInit {Text1:behaviorsubject<string> =NewBehaviorsubject<string> ("a"); Text2:behaviorsubject<string> =NewBehaviorsubject<string> ("B"); result$: Observable<string>; Constructor () {} ngoninit () { This. result$ = Observable.combinelatest ( This. Text1, This. Text2). Map (values = {                      returnValues[0] + "" + values[1];     }); }     }

And BufferCount, BufferTime is also used to

New Subject<number>();    Ngoninit () {    this. Text.buffercount (2)        //[V1,v2] Save enough count to publish     this. Text.buffertime (+)        //[V1,v2,...] Put all of the next value in 2 seconds }

Observable.of can simply return a default value

Observable.of<string> (""). Subscribe (v = console.log (v));

RXJS the entire document is very large and needs to be loaded on demand.

The usual practice is to open a rxjs-operators.ts for the project

Import ' Rxjs/add/observable/throw' rxjs/add/observable/combinelatest' rxjs/add/observable/ From 'rxjs/add/observable/of' rxjs/add/operator/catch' rxjs/add/operator/ debouncetime ' rxjs/add/operator/distinctuntilchanged' rxjs/add/operator/map' rxjs/ add/operator/switchmap ' rxjs/add/operator/topromise' rxjs/add/operator/startwith  ' ' Rxjs/add/operator/buffercount' rxjs/add/operator/buffertime ';

Put in a common method

And then app.module.ts it into the inside.

ANGULAR2 Study notes (RXJS Stream)