2017-03-03 3 views
0

Die unten genannte Lösung funktioniert nicht für angular router.when ich eine Methode aufrufen, ist es eine Service-Methode erfolgreich aufrufen, aber Eltern isoEmployer Component somethingChangedHandler() wird nicht ausgeführt.angular2-Komponente Kommunikation mit Router-Ausgang

@Component({ 
    selector: 'w2', 
    templateUrl: '../../html/views/w2old.html', 
    providers:[ListReloadService] 
    }) 

    export class W2Component implements OnInit { 

     constructor(private _httpService:HttpService, 
    private _router : Router, 
    private _activatedRoute :ActivatedRoute, 
    private _listReloadService:ListReloadService){ 

    } 

    submitW2() 
     { 
     this._listReloadService.emitEvent(false); 
     //calling parent somethingChangedHandler() 
    } 

    } 

    **MySevice** 

    @Injectable() 
    export class ListReloadService { 
    @Output() 
    public somethingChanged: EventEmitter<boolean>; 

    constructor(private _http: Http){ 
     this.somethingChanged = new EventEmitter(); 
    } 

    public emitEvent(val: boolean){ 
     console.log("hello"); 
     this.somethingChanged.emit(val); 
    } 
    } 

    **parent component** 

    @Component({ 
     selector: 'employerhome', 
     templateUrl: '../../html/views/employerhome.html', 
     providers:[ListReloadService] 
     }) 

    export class EmployerHomeComponent 
     { 
     constructor(private httpService:HttpService, private  listReloadService : ListReloadService){ 

     this.listReloadService.somethingChanged 
     .subscribe(data=>this.somethingChangedHandler(data)); 
    } 

    private somethingChangedHandler(someVal) 
     { 
     console.log("hello hi"); 
     } 
    } 
+1

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

+0

Sie müssen den Dienst für die Komponente bereitstellen, die den 'enthält Vorfahre dieser Komponente oder '@NgModule()'. Der Link, den ich vorher gepostet habe, zeigt ein ziemlich ähnliches Beispiel, nur dass die untergeordnete Komponente nicht vom Router hinzugefügt wurde. –

+0

'ListReloadService' sollte in' HomeComponent' oder 'AppComponent' oder' @NgModule' bereitgestellt werden, abhängig davon, welche Komponente an der Kommunikation teilnehmen soll. –

Antwort

0

einen Dienst, beispielsweise erstellen:

import {Injectable} from '@angular/core'; 

@Injectable() 
export class HiService { 

    sayHi() { 
     console.log("Hi!") 
    } 

}

inject in Ihnen AppComponent:

... 
providers: [HiService] 
... 

es in Ihrer Komponenten verwenden:

constructor(private hi: HiService) { 
    console.log("constructor") 
} 
ngOnInit(): void { 
    this.hi.sayHi() 
}