在Angular中将全局数据存储在哪里？

Question

我决定通过构建博客应用程序来一次学习Angular 4和ASP Net Core 2。我到了要为每个组件存储全局数据的地步。

例如，我希望当用户登录时将登录状态传递给我的导航栏组件，这样我就可以更改按钮，显示当前用户名等。

如何从LoginComponent传递数据到NavbarComponent等？

Answer 1

Stackblitz带有示例，说明如何在服务的各个组件之间应用可观察的和@Input数据更改。

您将需要一个服务和带有订阅的Rxjs来按角度进行操作：

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

@Injectable()
export class UserNameService {

    execChange: Subject<any> = new Subject<any>();

    constructor() {}

    /**
     * Use to change user name 
     * @data type: string
     */
    userNameChange(data: string) {
        this.execChange.next(data);
    }
}

然后在要更改用户名的每个组件中添加一个预订：

constructor(private userNameService : UserNameService) {
        this._subscription_user_name = this.userNameService.execChange.subscribe((value) => {
            this.userName= value; // this.username will hold your value and modify it every time it changes 
        });
}

如何更改值，以便每个订阅都可以修改值？execChange在服务中调用您的函数：

this.userNameService.userNameChange('Thor');

编辑：@Vikas的评论是正确的，并且很自我解释...您需要将服务添加到ngModule提供程序数组，否则您将无法处理未知的提供程序错误。

@NgModule({
  imports: [
    ...
  ],
  declarations: [...],
  providers: [UserNameService]
})

如果您需要跨标签或在刷新页面时保留数据，也请使用localstorage。