首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在angular2 js中,两个独立组件将如何相互对话?

在angular2 js中,两个独立组件将如何相互对话?
EN

Stack Overflow用户
提问于 2016-11-14 02:00:54
回答 1查看 315关注 0票数 0

我有两个独立的组件navbar.ts和home.ts。当用户登录时,我将路由到home.ts组件。当我刷新主页时,我无法在home.ts中加载home.ts组件,它正在显示navbar.ts组件。这是密码。

navbar.ts

代码语言:javascript
代码运行次数:0
运行
复制
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

代码语言:javascript
代码运行次数:0
运行
复制
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() {}

}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-14 02:48:42

很可能您将您的服务放在ngOnInit中,根据angular2中的生命周期挂钩,它将在加载时只执行一次,因此您希望检查您的服务并检查其更改,尝试ngDoCheck() {}代替,使用此方法检测忽略角度的更改。

DoCheck:当角脏检查指令时调用的生命周期挂钩。

使用方法:

代码语言:javascript
代码运行次数:0
运行
复制
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements DoCheck {
  ngDoCheck() {
    // ...
  }
}

文件在这里。

因此,将代码更改为:

代码语言:javascript
代码运行次数:0
运行
复制
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);
    }
 }
}

希望能帮上忙。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40580917

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档