Angular 2 RXJS - 无法获得要通话的组件

Question

我无法让两个组件通过Injectable服务进行通话。我无法弄清楚我在这里做错了什么。

我有：

• 登录组件 - @Component
• Navbar组件 - @Component
• 用户服务 - @Injectable

目标是让Login服务通知导航栏用户已登录，并正确显示链接。我使用RXJS让登录组件设置用户服务next的{​​{1}}值，该值应该通知导航栏用户。

我这些谈话的代码如下所示：

登录组件

BehaviorSubject

用户服务

@Component({...})
export class Login implements OnInit {
  constructor(fb: FormBuilder, private http: Http, private router: Router, public userService: UserService) {
    this.loginForm = fb.group({
      email: ["", Validators.required],
      password: ["", Validators.required]
    });

    var val = false;
    setInterval(() => {
        val = !val;
        userService.setNextIsLoggedIn(val);
    }, 1000);
  }
}

Navbar组件

@Injectable()
export class UserService {
    jwtToken: string;
    public isLoggedIn: Subject<boolean> = new BehaviorSubject<boolean>(false);

    setNextIsLoggedIn(val) {
        console.log('gets here!');
        this.isLoggedIn.next(val);
    }

}

登录组件与用户服务对话很好。如果我在UserService中放置一个subscribe语句，它会收到每次更新。但是，Navbar仅从其订阅中接收FIRST值。

有没有人有任何想法，我做错了什么？！

Answer 1

这可能是一个寒冷与热的可观察问题。默认情况下，Angular 2使用冷可观察量，其中值不在订阅上共享。您可能需要考虑使用热可观察或使用单个流来存储所有逻辑。

documentation关于冷与热的可观测量。

您也可以使用事件发射器：

{{1}}

一旦拥有了Rx.Observable，就可以应用share（）与其他流共享。