2つの独立したコンポーネントは、angular2 jsで互いにどのように話し合うのですか？

Question

私は2つの独立したコンポーネントnavbar.tsとhome.tsを持っています。私はhome.tsコンポーネントをユーザーのログイン時にルーティングしています。navbar.tsコンポーネントを表示しているホームページを更新すると、home.tsにnavbar.tsコンポーネントをロードできませんでした。ここにコードがあります。それはそうロードしている間、それはつもりに一度だけ実行されますだangular2におけるライフサイクルフックによると、あなたがngOnInitであなたのサービスを置くことが最も可能性があります

navbar.ts

import { Http } from '@angular/http'; 
import { Router } from '@angular/router'; 
import { Component, OnInit } from '@angular/core'; 

import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Component({ 
    selector: 'navbar', 
    template: template, 
}) 

export class NavbarComponent implements OnInit { 

    public isAuthenticated = new BehaviorSubject(false); 

    constructor(private http: Http, public router: Router, 
       public loginService: LoginService) {} 

    ngOnInit() { 
     if (this.loginService.isLoggedIn()) { 
      this.isAuthenticated.next(true); 
    } 
} 
} 

home.ts

import { Http } from '@angular/http'; 
import { Router } from '@angular/router'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'home', 
    template: template, 
    styles: [ styles ], 
}) 


export class Home implements OnInit { 

    constructor(public router: Router, public http: Http) {} 

    ngOnInit() {} 

} 

Answer 1

サービスをチェックして変更を確認したい場合は、代わりにngDoCheck（）{}を試してください。このメソッドを使用して、Angularが見落とした変更を検出します。

DoCheck：Angular dirtyがディレクティブをチェックするときに呼び出されるライフサイクルフック。これにコードを変更

@Component({selector: 'my-cmp', template: `...`}) 
class MyComponent implements DoCheck { 
    ngDoCheck() { 
    // ... 
    } 
} 

Document is here.

：どのように使用する

import { Http } from '@angular/http'; 
import { Router } from '@angular/router'; 
import { Component, DoCheck } from '@angular/core'; 

import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Component({ 
    selector: 'navbar', 
    template: template, 
}) 

export class NavbarComponent implements DoCheck { 

    public isAuthenticated = new BehaviorSubject(false); 

    constructor(private http: Http, public router: Router, 
       public loginService: LoginService) {} 

    ngDoCheck() { 
     if (this.loginService.isLoggedIn()) { 
      this.isAuthenticated.next(true); 
    } 
} 
} 

はそれが役に立てば幸い。