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 
    } 

有人可以告訴我如何從組件2調用Component1的刷新方法。

Answer 1

像@江YD說你需要一個服務來進行組件之間的通信。在註冊提供商服務的地方，您必須小心。您可以在應用程序的根目錄或頂層組件中執行此操作。這樣兩個組件都有相同的服務實例。

下面是使用可觀察到的一個簡單的例子：

// 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() { 
     ... 
    } 
}