Где хранить глобальные данные в Angular? - PullRequest
0 голосов
/ 27 апреля 2018

Я решил изучить Angular 4 и ASP Net Core 2 сразу, создав приложение для блога. Я пришел к точке, где я хочу хранить глобальные данные для каждого компонента.

Например, я хочу, чтобы пользователь вошел в систему, чтобы передать зарегистрированное состояние моему компоненту navbar, и таким образом я могу изменить кнопки, показать текущее имя пользователя и т. Д.

Как из моего LoginComponent я могу передавать данные в мой NavbarComponent и так далее?

Ответы [ 3 ]

0 голосов
/ 27 апреля 2018

Это может быть излишним для начала изучения Angular, но, как указал @ShellNinja, вы можете рассмотреть библиотеку, предлагающую управление состоянием, например, ngrx .

Из @ ngrx / store документов:

Управление состоянием на основе RxJS для приложений Angular, вдохновленное Redux

@ ngrx / store - контейнер контролируемого состояния, предназначенный для помощи в записи. Производительные, последовательные приложения на вершине Angular. Основные принципы:

Состояние - это единая неизменная структура данных. Действия описывают состояние изменения. Чистые функции, называемые редукторами, принимают предыдущее состояние и следующее действие для вычисления нового состояния. Доступ к государству с помощью Магазин, наблюдаемый государством и наблюдатель действий. Эти ядра принципы позволяют создавать компоненты, которые могут использовать изменение OnPush стратегия обнаружения, дающая вам интеллектуальное, эффективное обнаружение изменений во всем приложении.

0 голосов
/ 28 апреля 2018

Как правило, рекомендуется хранить имя пользователя в 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 }
    );
  }
}
0 голосов
/ 27 апреля 2018

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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...