Persistance et accès aux valeurs globalement dans plusieurs composants dans Angular 2

J'ai une page de paramètres, les utilisateurs peuvent enregistrer certaines variables de configuration, comme un nom d'utilisateur. L'utilisateur peut également modifier le nom d'utilisateur sur la page. Mais quand je vais à un autre Composant (page) et à l'arrière, le nom d'utilisateur n'est pas enregistré.

Je veux aussi montrer le nom de l'utilisateur dans les autres composantes. Comment dois-je faire? Avec une variable globale?

Structure:
- App
- app.ts (principal)
- réglage.ts
- someOtherComponent.ts

source d'informationauteur

angular angular2-services

29

Ce que vous avez besoin est un service destiné à maintenir l'état de vos variables. Vous serez alors en mesure d'injecter ce service à tout composant de définir ou obtenir cette variable.

Voici un exemple (/services/ma.service.ts):
```
import {Injectable} from "angular2/core";

@Injectable()
export class MyService {
    private myValue;

    constructor() {}

    setValue(val) {
        this.myValue = val;
    }

    getValue() {
        return this.myValue ;
    }
}
```
Vous auriez probablement eu envie de mettre que le service dans les fournisseurs de tableau de votre application bootstrap fonction (qui peut être dans votre application principale composante de fichier, ou dans un fichier séparé en fonction de comment vous aimez faire les choses).

Dans votre application principale de fichier (/app.ts):
```
import {MyService} from './services/my.service';
bootstrap(App, [MyService, COMMON_DIRECTIVES, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HTTP_PROVIDERS]); //directives added here are available to all children
```
Vous n'avez pas besoin d'avoir COMMON_DIRECTIVES et de l'autre tous les bouchons des éléments dans le tableau, mais ceux-ci sont généralement inclus juste pour faire de sorte que vous n'avez pas à configurer chaque composant que vous écrivez.

Ensuite, vous accédez au service depuis l'intérieur d'un composant qui ressemble à ceci (/composants/quelques-composant.ts):
```
import {MyService} from '../services/my.service';

@Component({
    selector: 'some-component',
    template: `
<div>MyValue: {{val}}</div> 
`
})
export class SomeComponent {
    constructor(private myService:MyService) {
    }

    get val() {
        return this.myService.getValue();
    }
}
```
Vous pouvez également ajouter le service de sorte qu'il a sauvé de la valeur à quelque part (semi) permanent afin qu'il puisse être consulté la prochaine fois que l'utilisateur a entré l'application.

Cela peut-être trop dans votre situation actuelle, mais si vous allez développer votre application dans un plus grand, cela peut vous faire gagner beaucoup de problèmes sur toute la ligne. Ceci dit, je crois Angulaire avec Redux-comme le magasin est vraiment une combinaison puissante. Ma suggestion est d'utiliser ngrx/store module.

RxJS alimenté la gestion de l'état Angulaire applications, inspiré par Redux

Source: ngrx/store dépôt GitHub

Le code ci-dessous doit décrire toutes les étapes que vous devez suivre pour intégrer la ngrx/store dans votre application. Par souci de concision, j'ai omis de code existant que vous pourriez avoir et toutes les importations dont vous aurez besoin pour ajouter.

Installer le Module

npm install --save ngrx/core ngrx/store

Créer un Réducteur de

export const SETTINGS_UPDATE = 'SETTINGS_UPDATE';

const initialState = {
    username: ''
};

export function settingsReducer(state: Object = initialState, action: Action) {
    switch (action.type) {
        case SETTINGS_UPDATE:
            return Object.assign({}, state, action.payload);
        default:
            return state;
    }
};

Importer les StoreModule

@NgModule({
    imports: [
        //your other imports
        StoreModule.provideStore({
            settings: settingsReducer
        })
    ]
})
export class AppModule {
    //
}

Créer l'Interface pour les Paramètres de Réducteur de

export interface SettingsStore {
    username: string;
}

Créer une Interface de banque

export interface AppStore {
    settings: SettingsStore;
}

De Créer Des Paramètres De Service

@Injectable()
export class SettingsService {

    settings$: Observable<SettingsStore>;

    constructor(private store: Store<AppStore>) {
        this.settings$ = this.store.select('settings');
    }

    public update(payload) {
        this.store.dispatch({ type: SETTINGS_UPDATE, payload });
    }

}

Paramètres Composant Contrôleur

@Component({
    ...
})
export class SettingsComponent implements OnInit {

    settings$: Observable<SettingsStore>;

    constructor(private settingsService: SettingsService) {
        //
    }

    ngOnInit() {
        this.settings$ = this.settingsService.settings$;
    }

    public updateUsername() {
        this.settingsService.update({ username: 'newUsername' });
    }

}

Paramètres Du Modèle De Composant

<p *ngIf="(settings$ | async)?.username">
    <strong>Username:</strong>
    <span>{{ (settings$ | async)?.username }}</span>
</p>

<button (click)="updateUsername()">Update Username</button>

Avec la configuration décrite ci-dessus, vous pouvez ensuite injecter le SettingsService à tout composant et l'affichage de la valeur dans son modèle.

De la même façon, vous pouvez également mettre à jour la valeur de la store partir de n'importe quel composant à l'aide de this.settingsService.update({ ... }); et le changement pourra être répercuté sur tous les lieux qui sont à l'aide de cette valeur - être un composant via un async tuyau ou d'un autre service via .subscribe().

Vous auriez besoin d'un service de ce que vous pouvez injecter dans les partout où vous en avez besoin.:

@Injectable()
export class GlobalService{
  private value;

  constructor(){

  }

  public setValue(value){
    this.value = value;
  }

  public getValue(){
    return this.value;
  }
}

Vous pouvez fournir ce service dans tous vos modules, mais il y a une chance, vous obtiendrez plusieurs instances. Donc, nous allons faire le service d'un singleton.

@NgModule({
  providers: [ /* DONT ADD THE SERVICE HERE */]
})
class GlobalModule {
  static forRoot() {
    return {
      ngModule: GlobalModule,
      providers: [ GlobalService ]
    }
  }
}

Vous devriez appeler le forRoot méthode que dans votre AppModule:

@NgModule({
  imports: [GlobalModule.forRoot()]
})
class AppModule {}

1

Vladimir correctement mentionné au sujet de ngrx.

Je voudrais utiliser un service avec Subject/BehaviourSubject et Observable à set et get l'état (valeurs) que j'ai besoin.

Nous avons discuté ici La Communication entre plusieurs composants avec un service à l'aide Observables et sous réserve Angulaire 2 comment vous pouvez partager des valeurs de plusieurs composants qui n'ont pas de parent-child ou child-parent relation et sans de l'importation d'une bibliothèque externe comme ngrx magasin.
1

J'ai le même problème, la plupart des besoins en composants loggedInUser de l'information.
Pour exemple : nom d'utilisateur, la langue préférée, préféré le fuseau horaire de l'utilisateur, etc.

Donc, pour cela, une fois que l'utilisateur se connecte, on peut effectuer les opérations suivantes :

Si toutes les informations sont dans JWT Jeton ou /moi Api RESTful, alors vous pouvez décoder le jeton dans l'une des service.

par exemple: l'utilisateur.service.ts
```
@Injectable()
export class UserService {

  public username = new BehaviorSubject<string>('');
  public preferredLanguage = new BehaviorSubject<string>('');
  public preferredTimezone = new BehaviorSubject<string>('');

  constructor(
    private router: Router,
    private jwtTokenService: JwtTokenService
  ) {
    let token: string = localStorage.getItem('token'); //handled for page hard refresh event
    if (token != null) {
      this.decode(token);
    }
  }

  private decode(token: string) {
    let jwt: any = this.jwtTokenService.decodeToken(token);
    this.username.next(jwt['sub']);
    this.preferredLanguage.next(jwt['preferredLanguage']);
    this.preferredTimezone.next(jwt['preferredTimezone']);
  }

  public setToken(token: any) {
    localStorage.setItem('auth_token', token);
    this.decode(token);
  }

}
```
qui détient trois publics Comportement de l'objet, celui qui est à l'écoute de cette variable, obtenez la valeur si c'est le changement. Veuillez vérifier les rxjs style de programmation.

et maintenant, partout où cette variable sont nécessaires, il suffit de s'abonner à partir de ce composant.

Pour exemple: NavComponent sera définitivement besoin d'un nom d'utilisateur. d'où le code comme ci-dessous:
```
export class NavComponent implements OnInit {

    public username: string;

    constructor(
        private userService: UserService,
        private router: Router) {
    }        

    ngOnInit() {
        this.userService.username.subscribe(data => {
          this.username = data;
        });        
    }
}
```
Donc, réactif de programmation donne la meilleure solution pour faire face à la dépendance de la variable.

Ci-dessus résout également le problème si la page est dur d'actualisation, comme je suis de stocker la valeur dans le localstorage et de récupération dans le constructeur.

Veuillez noter : Il est supposé que l'utilisateur connecté données proviennent de JWT jeton, nous pouvons également le même service(UserHttpService) si les données proviennent de Api Restful. Par exemple: api/me

Vous devez vous connecter pour publier un commentaire.