在angular2 js中，两个独立组件将如何相互对话？
在angular2 js中，两个独立组件将如何相互对话？
提问于 2016-11-13 18:00:54
我有两个独立的组件navbar.ts和home.ts。当用户登录时，我将路由到home.ts组件。当我刷新主页时，我无法在home.ts中加载home.ts组件，它正在显示navbar.ts组件。这是密码。
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() {}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-13 18:48:42
很可能您将您的服务放在ngOnInit中，根据angular2中的生命周期挂钩，它将在加载时只执行一次，因此您希望检查您的服务并检查其更改，尝试ngDoCheck() {}代替，使用此方法检测忽略角度的更改。
DoCheck:当角脏检查指令时调用的生命周期挂钩。
使用方法：
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements DoCheck {
ngDoCheck() {
// ...
}
}因此，将代码更改为：
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);
}
}
}希望能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40580917
复制相关文章
相似问题
Vue.js组件不是相互独立的
使相邻组件相互独立
在两个独立组件angular2之间共享数据
如何从相互独立的组件调用函数
在angular2中，如何让子组件相互通信？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
