Angular2の2つのコンポーネント間の通信

Question

Angular2でアプリケーションを構築しています。私は、2つ目のコンポーネントが最初のコンポーネントのルータ出口にロードされている2つのコンポーネントを持っています。

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のリフレッシュ方法を呼び出す方法を教えてください。

Answer 1

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