在Angular2中的两个组件之间进行通信

Question

我正在Angular2中构建一个应用程序。 我有两个组件，其中第二个组件加载在第一个组件的路由器出口中。

Component 1
@Component({
    selector: 'component1',
    templateUrl: '
     <div>
     ...
     ...
     ...
     </div>
     <router-outlet></router-outlet>
    '
})
@RouteConfig([
    { path: '/component2', component: Component2, name: 'Component2', useAsDefault: true }])

export class Component1{
     ...
     ...
     ...
     refresh(){
        ...
        ...
     }
}

现在是Component2。

@Component({
        selector: 'component2',
        templateUrl: '
         <div>
         ...
         ...
         ...
         </div>
        '
    })

export class Component2{
     ...
     ...
     ...
     thisFunctionShouldRefreshComponent1(){
        //call Component1's refresh here
     }

有人可以告诉我如何从Component2调用Component1的refresh方法。

Answer 1

就像@Jiang YD所说，您需要一种服务来在组件之间进行通信。 您必须小心在哪里注册服务提供商。 您可以在应用程序的根目录或顶级组件中执行此操作。 这样两个组件都具有相同的服务实例。

这是一个使用observable的简单示例：

// The service
@Injectable()
export class SomeService {
    refresh: Subject<boolean> = new BehaviorSubject<boolean>(false);

    refresh() { this.refresh.next(true) }
}

// Component 1
@Component({
    selector: 'c1',
    // Register the provider here for example
    providers: [SomeService]
    ...
})
export class Component1 {
   constructor(
       private _ss: SomeService
   ) {}

   refresh() {
      this._ss.refresh()
   }
}

// Component 2
@Component({
    selector: 'c2',
    ...
})
export class Component2 {
   constructor(
       private _ss: SomeService
   ) { 
       this._ss.refresh.subscribe(a => {
           if (a) this.refresh();
       })
   }  

   refresh() {
       ...
   }
}