ANGULAR2 communication between components-using service communication mode 2016.10.27 based on the official version ng2

NG2 component Communication in work the official documentation is concise and I understand that after finishing

Rxjs do not understand this article is very detailed http://www.open-open.com/lib/view/open1462525661610.html

Here is the service code

1Import {injectable} from ' @angular/core ';2Import {subject}from "Rxjs/subject";3 @Injectable ()4 Export class Cservice {5Private Outputtitle =NewSubject ();6   //Subscribe7 //declaring a variable subscription observer8output$ = This. outputtitle.asobservable ();9 Ten   //push calls to the next method subject will send to all observer that have been registered on it thevalue One  A Updata (message:any) { -      This. Outputtitle.next (message); -   } the}

The following is a code excerpt from a subassembly

1 Import {Component, OnInit, Input,2Import {Cservice}from "... /shared/corresponded.service ";//Introducing Service Singleton mode3 4 @Component ({5 //you must not sign up for a service provider .6Providers: []//no need to provide cservice service7    })8 Export Class Homepostscomponent implements OnInit {9 Ten Constructor ( One               //same instance as the CS service instance of the parent component A Public _cservice:cservice) { -   } -  the //your business needs to be called when it's initialized, so put it here. - Ngoninit () { -     //Send Message - //Updata calling the next method to push the data +      This. _cservice.updata ({title: "Bell Pet", ico: "& #xe726;"}); -   } +  A}

The following is an excerpt of the parent component code

1Import {Component,oninit,afterviewchecked,afterviewinit} from ' @angular/core ';2 //Introducing Services3Import {Cservice}from "./shared/corresponded.service";4 @Component ({5   //The service provider only uses the child components in the parent component without requiring6 providers: [Cservice]7 })8 Export Class AppComponent implements Oninit,afterviewchecked,afterviewinit {9 //here instances of CS and subcomponents are the same instanceTen Constructor (private Cs:cservice) { One  A   } -  -   //called after ngafterviewchecked changes are detected each time the component view and the child view are completed. Will execute multiple times the   //Ngafterviewinit is called after the component view and its child views are initialized. Call only once -   //Subscribe to component information write-only, receive, write, send, reason is the same. - Ngafterviewinit () { -Let that = This; +Console.log ("Ngafterviewinit"); -      This. Cs.output$.subscribe ((Value:any) = { + Console.log (value); AThat.title =Value.title; atThat.ico =Value.ico; -     }) -   } -  -    -}

The core of the entire communication process is only one instance of a service in a single case at present, there's so much to talk about.

ANGULAR2 communication between components-using service communication mode 2016.10.27 based on the official version ng2