Question

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

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

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

Answer 1

Stackblitz以及如何在服务组件中应用observable和@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。

Answer 2

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

来自@ngrx/store文档：

RularJS为Angular应用程序提供动力状态管理，受到的启发   终极版

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

State是一个单一的，不可变的数据结构。行动描述了国家   变化。称为reducer的纯函数采用先前的状态和   计算新状态的下一个操作。国家访问与   存储，可观察到的状态和行动的观察者。这些核心   原则使构建可以使用OnPush更改的组件成为可能   检测策略为您提供智能，高效的变化检测   在整个申请过程中。

Answer 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 }
    );
  }
}

在Angular中存储全局数据的位置？

3 个答案: