Angular2 - 将路由器出口外的数据传输到另一个组件

Question

我是Angular2的新手,但我已经制作了30多个组件和服务,并使用了Input,Output,ChangeDetectorRef,Pipes.所以现在非常了解Angular2.我的app.component.ts看起来像这样

import { Component } from '@angular/core';
@Component({
    selector: 'soc',
    template: `
        <header-block></header-block>
        <router-outlet></router-outlet>
    `,
})
export class AppComponent { }

因为我需要在每个页面中使用我的标题块,所以我将它添加到路由器块之外,所以我不必在任何地方添加它.现在我遇到的问题是在router-outlet中的视图中执行操作后更改header-block中的变量值.

例如,我有一个菜单,只有在用户登录后才能看到.

{{ user_is_logged }}
<ul class="nav navbar-nav navbar-right" *ngIf="user_is_logged == '1'">
    <li><a href="#" (click)="logout($event)">Logout</a></li>
</ul>

user_is_logged是一个变量,其值来自header.block.component.ts中的 localStorage

user_is_logged:string = localStorage.getItem("logged");

当用户未登录时,即home.component.ts (其中写入了登录逻辑)未定义user_is_logged,我要求用户登录并在成功登录后更新user_is_logged变量的值并更新localStorage值变量然后通过使用ChangeDetectionRef(cdr)触发检测更改,然后路由到用户配置文件

this.user_is_logged = "1";
localStorage.setItem('logged', '1');
this.cdr.detectChanges();
this.router.navigate(['u/'+user_id']); //user_id is from login response from server

问题是当我在成功登录后到达用户配置文件时,{{user_is_logged}}的值永远不会更新,即使在使用变量本身或使用localStorage中的值甚至调用检测时也是如此.

是可以这样做还是我必须分别为每个页面添加header-block？如果我错过了什么,请询问更多信息.

---

编辑 ============>

所以在浏览了Subject,BehaviourSubject,AsyncSubject,ReplaySubject,Observables以及我不能让它工作的时候.这是我写的最后一个代码:

home.page.component.ts(登录发生并且必须发出事件)

import { HomeService } from '../services/home.service';
// No observable or subject imported here.

login() {
    // Sending status 1 to HomeService
    this.HomeService.changeStatus("1");
}

home.service.ts(由两个组件导入)

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
// I imported Subject, BehaviourSubject, Observables but cant get it to work

export class HomeService {

    // This looked more reliable than Subject so used this; init with value "0"
    public subjectStream = new BehaviorSubject<string>('0');


    constructor(
    ){
        this.subjectStream.subscribe(value => {
            // Successfully logs value "1" sent by changeStatus below
            console.log(value);
        });
    }


    changeStatus(value: any){

        // Gives value "1" when called by home.page.component.ts
        console.log(value);

        // Looks correct because it successfully sent value to construct
        this.subjectStream.next(value);

    }

}

header.block.component.ts

import { HomeService } from '../services/home.service';
// No observable or subject imported here also.


constructor(
){
    this.HomeService.subjectStream.subscribe(value => {
        // Logs value "0" at beginning but never logs value "1"
        console.log(value);
    });
}

我的日志

// logged by constructor when imported by header.block.component
home.service.ts:31                  0

// logged by constructor of header.block.component itself
header.block.component.ts:25        0

// logged by constructor when imported by home.page.component (I think)
home.service.ts:31                  0

// ===================
// Login called here
// ===================

// logged by changeStatus after login after called by home.component
home.service.ts:36                  1 

// logged by constructor after getting event from changeStatus
home.service.ts:31                  1

我在header.block.component.ts中缺少什么？由于该值在home.service.ts中成功更新,但从未进入标题.

Answer 1

如果您HomeService在主页和标题中提供，您将获得 2 个HomeService. 如果您想共享服务，则只需在父组件上提供一次。如果您想与整个应用程序共享单个实例，请仅在@NgModule()以下时间提供：AppModule