2017-03-03 10 views
0

以下のソリューションは、角度ルータでは機能しません。メソッドを呼び出すと、サービスメソッドが正常に呼び出されていますが、親ieEmployerコンポーネントsomethingChangedHandler()は実行されません。ルータ出口を使用したangular2コンポーネント通信

@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

」を含むコンポーネントでサービスを提供する必要があります。このコンポーネントの祖先か '@NgModule()'です。私が前に投稿したリンクは、かなり類似した例を示しています。ちょうどその子コンポーネントがルータによって追加されていないということです。 –

+0

'ListReloadService'は' HomeComponent'か 'Ap​​pComponent'か' @ NgModule'で提供されるべきです。 –

答えて

0

サービスを作成し、例:あなたAppComponentで

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

@Injectable() 
export class HiService { 

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

}

注入:

... 
providers: [HiService] 
... 

は、あなたのコンポーネントでそれを使用します。

constructor(private hi: HiService) { 
    console.log("constructor") 
} 
ngOnInit(): void { 
    this.hi.sayHi() 
} 
関連する問題