angular - 如何更新angular2中的全局变量

Question

我正在使用 Angular 2。对于全局变量访问，我创建了一个服务并将其注入(inject)到我的组件页面中。

我可以在任何页面中访问它，但是当我更新该变量时，更改不会影响在另一个页面中访问它。

这是GlobaldataService中的代码:

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

@Injectable()
export class GlobaldataService {
    public var1="haii";
}

这是我使用的服务:

constructor(public obj: GlobaldataService){}

在我的一个组件页面中，我通过 this.obj.var1 ="hello"; 更新了变量

在另一个页面组件 alert(this.obj.var1); 但它显示旧值，即“haii” 我如何更新全局变量。

提前致谢。

Answer 1

您需要的是信使服务。它保留一个全局变量，并为您的组件提供一个 Observable 来订阅，以及一个更新和广播新值的方法:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject ';
import { Observable } from 'rxjs/Observable ';

@Injectable()
export class MessengerService {

    private messageSource: BehaviorSubject<string> = new BehaviorSubject('initialValue'); 
    public message = this.messageSource.asObservable();

    public setMessage(value: string) {
        this.messageSource.next(value);
    }
}

在您的组件中，您只需订阅该值并可以更新它:

import { Subscription } from 'rxjs/BehaviorSubject ';

export class ViewComponent implements OnInit, OnDestroy {

    private messageSubscription: Subscription;

    constructor(private messengerService: MessengerService) { }

    ngOnInit() {
        this.messageSubscription = this.messengerService.message.subscribe(m => {
            // Do something with your value
        });
    }

    ngOnDestroy() {
        this.messageSubscription.unsubscribe();
    }

    setGlobalValue(value: string) {
        // All components that are subscribed to the
        // messenger service receive the update
        this.messengerService.setMessage(value);
    }
}