使用路由器插座的angular2组件通信答案

【问题标题】：angular2 component communication using router outlet使用路由器插座的angular2组件通信
【发布时间】：2017-03-03 07:24:27
【问题描述】：

以下解决方案不适用于角度路由器。当我调用一个方法时，它成功调用了一个服务方法，但父级即雇主组件 somethingChangedHandler() 没有被执行。

    @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"); 
       }
    }

【问题讨论】：

angular.io/docs/ts/latest/cookbook/…
您需要在包含<router-outlet>、该组件的祖先或@NgModule()的组件上提供服务。我之前发布的链接显示了一个非常相似的示例，只是子组件不是由路由器添加的。
ListReloadService 应在HomeComponent 或AppComponent 或@NgModule 中提供，具体取决于应参与通信的组件。
我已经尝试过上述解决方案，但它对我不起作用。我正在分享我更新的代码
@Component({ selector: 'w2', templateUrl: '../../html/views/w2old.html', providers:[ListReloadService] }) 导出类 W2Component 实现 OnInit { w2 :W2=新 W2();私人 w2Id ：号码；构造函数（私有_httpService：HttpService，私有_router：路由器，私有_activatedRoute：ActivatedRoute，私有_listReloadService：ListReloadService）{} submitW2（）{ this._listReloadService.emitEvent（false）； //调用父级 } }

标签： angular components

【解决方案1】：

创建一个服务，例如：

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

@Injectable()
export class HiService {

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

}

在你的 AppComponent 中注入：

...
providers: [HiService]
...

在你的组件中使用它：

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

【讨论】：