Angular 在哪里存储全局数据？答案

【问题标题】：Where to store global data in Angular?Angular 在哪里存储全局数据？
【发布时间】：2023-04-08 09:23:01
【问题描述】：

我决定通过构建博客应用程序同时学习 Angular 4 和 ASP Net Core 2。我想为每个组件存储全局数据。

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

如何从我的 LoginComponent 将数据传递给我的 NavbarComponent 等等？

【问题讨论】：

存储在服务中并添加到模块的提供者中怎么样？
angular.io/guide/…
既然你刚开始，我会坚持使用 EventEmitters 和 @inputs 并通过 angular 文档共享数据，但 Redux 将适用于在每个组件之间共享的更复杂的数据存储。

标签： angular

【解决方案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。

【讨论】：

我认为您还应该提到，如果我们希望全局共享依赖项的实例并在应用程序之间共享状态，我们应该将其注册到`@NgModule's` providers 数组；）
这里你必须注入所有组件，我认为这是缺点。你知道用最少的配置实现它的方法吗？

【解决方案2】：

开始学习 Angular 可能有点矫枉过正，但正如 @ShellNinja 指出的那样，您可能会考虑提供状态管理的库，例如ngrx。

来自@ngrx/store 文档：

RxJS 支持 Angular 应用程序的状态管理，灵感来自还原

@ngrx/store 是一个受控状态容器，旨在帮助编写基于 Angular 的高性能、一致的应用程序。核心原则：

状态是一个单一的、不可变的数据结构。动作描述状态变化。称为 reducer 的纯函数采用先前的状态，并且计算新状态的下一个动作。访问的状态存储，状态的可观察者和动作的观察者。这些核心原则允许构建可以使用 OnPush 更改的组件检测策略为您提供智能、高性能的变化检测在整个应用程序中。

【讨论】：

【解决方案3】：

我认为，通常最好将用户名保存在 localStorage。

所以这个 Appservice 订阅了 Webservice

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class AppService {
  protected authHeaders = new Headers({'Authorization': localStorage['accessToken']});
  protected headers = new Headers(this.authHeaders);

  constructor(protected http: Http) {
    this.headers.append('Content-Type', 'application/json');
  }

  login(username: string, password: string): Observable<string> {
    let info = JSON.stringify({username: username, password: password});
    return this.http.post('/login', info, {headers: this.headers})
      .map(res => res.headers.get('Authorization'))
      .catch(this.handle);
  }
}

这里是组件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AppService } from '../app.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  private username: string;
  private password: string;
  private showErrorMessage: boolean = false;

  constructor(private service: AppService, private router: Router) { }

  ngOnInit() {
    if (localStorage.getItem('accessToken')) this.router.navigate(['/Home']);
  }

  login() {
    this.service.login(this.username, this.password).subscribe(
      data => {
        localStorage.setItem('userName', this.username);
        localStorage.setItem('accessToken', data);
        this.router.navigate(['/Home']);
      },
      () => { this.showErrorMessage = true }
    );
  }
}

【讨论】：