Angular2订阅一个全局变量答案

【问题标题】：Angular2 Subscribe to a global variableAngular2订阅一个全局变量
【发布时间】：2016-10-24 14:34:15
【问题描述】：

我对 Angular 2 还很陌生，但遇到了一个小问题。我有一个标题组件，在标题中我想使用ngIf，因为在登录屏幕中我将隐藏标题（导航栏）。此外，我想从标题中隐藏更多内容，具体取决于用户配置文件。

为了存储，如果用户登录，我有一个名为 variables.ts 的全局服务，如下所示：

    import { Injectable }   from '@angular/core';

@Injectable()
export class Variables {
    private url = "...";
    private username;
    private password;
    private isLoggedIn = false;

    constructor() {}

    setUrl(val) {
        this.url = val;
    }
    getUrl() {
        return this.url;
    }

    setUsername(val) {
        this.username = val;
    }
    getUsername() {
        return this.username;
    }

    setPassword(val) {
        this.password = val;
    }
    getPassword() {
        return this.password;
    }

    setIsLoggedIn(val) {
        this.isLoggedIn = val;
    }
    getIsLoggedIn() {
        return this.isLoggedIn;
    }
}

我的标题组件如下所示：

    import { Component }            from '@angular/core';
import { Router }               from '@angular/router';
import { Variables }            from '../../services/variables';

@Component({
    selector: 'app-header',
    moduleId: module.id,
    templateUrl: 'header.component.html'
})


export class HeaderComponent {

    constructor(private variables: Variables) {}
    isLoggedIn() {  
        return this.variables.getIsLoggedIn();
    }
    console.log(loggedIn); 
}

最后但并非最不重要的是，在 header.component.html 我这样做了：

<nav class="navbar navbar-default navbar-static-top" *ngIf="isLoggedIn()">

我现在的问题是，标头组件不会自动更新 var loggedIn，因此如果我登录，标头会被隐藏。

我怎样才能让它发挥作用？

【问题讨论】：

stackoverflow.com/questions/34572005/…
感谢您的评论，但如果我执行此操作，我会收到“在变量上找不到指令注释”...您知道任何帮助吗？
发布您如何实施全球服务的代码。
请编辑您的问题并在此处添加代码。 cmets 中的代码不可读。
我认为最好将这些变量移动到您在@NgModule({providers: [myService]}) class AppModule{} 中提供的服务并使用Observable（或Subject、BehaviorSubject）以允许感兴趣的组件订阅更改.另见angular.io/docs/ts/latest/cookbook/component-communication.html

标签： html angular typescript

【解决方案1】：

我更新了我原来的帖子，现在它可以正常工作了；）感谢您的帮助！

解决方案：不要将其直接绑定到变量，而是绑定到函数，并且在“ngIf”中只询问函数;)

【讨论】：

return this.variables.getIsLoggedIn(); 创建一个未连接的副本，因此不会反映对原件的更改。使用您的方法，您无需创建副本而是绑定到原始副本，因此 Angular2 更改检测会检测到更改并更新视图。
值的传递方式有所不同。 string、num、boolean 等基元作为副本传递，对象作为引用传递。当一个引用被传递并且接收者修改了属性，那么这些变化在原始中也是可见的（它们有一个对同一个对象实例的引用），这不是原始的情况，因为没有引用，只有值本身.