javascript - Angular2: Send data from one component to other and act with the data -
i'm learning angular2. in order that, have 2 components, on click of 1 of components, other component should notified , act that.
this code far:
export class jsontextinput { @output() rendernewjson: eventemitter<object> = new eventemitter() json: string = ''; process () { this.rendernewjson.next(this.json) } }
the process function being called on click on first component. on second component have code:
export class jsonrendered { @input() jsonobject: object ngonchanges () { console.log(1) console.log(this.jsonobject) } }
the ngonchanges never runned, dont how pass info 1 component other
edit
there app
component parent of 2 components. none of both parent of other
this how clasess now:
export class jsonrendered { private jsonobject: object constructor (private jsonchangeservice: jsonchangeservice) { this.jsonchangeservice = jsonchangeservice this.jsonobject = jsonchangeservice.jsonobject jsonchangeservice.statechange.subscribe(json => { this.jsonobject = json; console.log('change made!') }) } } export class jsontextinput { json: string = ''; constructor (private jsonchangeservice: jsonchangeservice) { this.jsonchangeservice = jsonchangeservice } process () { this.jsonchangeservice.jsonchange(this.json) } }
and service
import {injectable, eventemitter} '@angular/core'; @injectable() export default class jsonchangeservice { public jsonobject: object; statechange: eventemitter<object> = new eventemitter<object>(); constructor(){ this.jsonobject = {}; } jsonchange(obj) { console.log('sending', obj) this.jsonobject = obj this.statechange.next(this.jsonobject) }
}
create service so...
import {injectable, eventemitter} 'angular2/core'; @injectable() export class myservice { private searchparams: string[]; statechange: eventemitter<any> = new eventemitter<any>(); constructor(){ this.searchparams = [{}]; } change(value) { this.searchparams = value; this.statechange.next(this.searchparams); } }
then in component...
import {component} 'angular2/core'; import {myservice} './myservice'; @component({ selector: 'my-directive', pipes: [keyvaluefilterpipe], templateurl: "./src/sometemplate.html", providers: [myservice] }) export class mydirective { public searchparams: string[]; constructor(private myservice: myservice) { this.myservice = myservice; myservice.statechange.subscribe(value => { this.searchparams = value; console.log('change made!') }) } change(){ this.myservice.change(this.searchparams); } }
you have subscribe eventemitter, update variable. change event in service fired of like...
(click)="change()"
Comments
Post a Comment