我有兩個獨立的組件navbar.ts和home.ts.當用戶登錄時，我將路由到home.ts組件。當我刷新顯示navbar.ts組件的主頁時，我無法在home.ts中加載navbar.ts組件。這是代碼。兩個獨立組件如何在angular2 js中彼此交談？

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

}

來源

2016-11-14 seenu s

它最有可能是你把你的服務放在ngOnInit中，根據angular2中的生命週期鉤子，它只會在加載時執行一次，所以你想檢查你的服務並檢查它的改變，試試ngDoCheck（）{}方法來檢測Angular忽略的變化。試試看，讓我知道，不要忘記實施DoCheck課程。 – Majid

我能否改變home.ts中的isAuthenticated變量。當我重新加載頁面時，它正在檢測isAuthenticated的更改。否則它不會。 –

基本上，ngOnInit（）只能在加載時執行一次，並且不會查找任何更改，因此這就是爲什麼當您重新加載它時有效，但是當它不工作時。這是我的猜測，就像它說的很有可能，如果你改變做檢查它會解決你的問題。 – Majid

它最有可能是你把ngOnInit您服務，根據angular2生命週期掛鉤它是會得到在加載所以只執行一次你想檢查你的服務並檢查它的改變，試試ngDoCheck（）{}來代替，使用這個方法來檢測Angular忽略的改變。

DoCheck：Angular髒檢查指令時調用的生命週期鉤子。

如何使用：

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

希望它幫助。

來源

2016-11-14 02:48:42 Majid

兩個獨立組件如何在angular2 js中彼此交談？

navbar.ts

home.ts

回答

相關問題