Speichern und zugreifen auf Werte, die weltweit in mehrere Komponenten, im Winkel 2

Was Sie brauchen, ist ein service behalten Sie den Zustand Ihrer Variablen. Sie wären dann in der Lage zu injizieren, der service in jeder Komponente zu setzen oder zu bekommen, dass eine variable.

Hier ist ein Beispiel (/services/my.service.ts):

import {Injectable} from "angular2/core";

@Injectable()
export class MyService {
    private myValue;

    constructor() {}

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

    getValue() {
        return this.myValue ;
    }
}

Würden Sie wahrscheinlich wollen zu setzen, dass der service in der Anbieter-array der app-bootstrap-Funktion (die möglicherweise in Ihre Haupt-app-Komponente-Datei oder in eine separate Datei je nachdem, wie Sie möchten, um Dinge zu tun).

In Ihre Haupt-app-Datei (/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

Brauchen Sie nicht zu haben COMMON_DIRECTIVES und die anderen alle Kappen der Elemente im array, aber diese sind im Allgemeinen einfach zu machen, so dass Sie nicht haben, konfigurieren Sie in jeder Komponente, die Sie schreiben.

Dann würden Sie den Zugriff auf den service innerhalb einer Komponente wie folgt (/components/einige-Komponente.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();
    }
}

Vielleicht möchten Sie auch hinzufügen, um den service so, dass es gespeichert wird der Wert irgendwo (semi -) permanent, so dass es erreicht werden konnte, das nächste mal der Benutzer in die Anwendung.

InformationsquelleAutor der Antwort Michael Oryl

Würden Sie brauchen eine service-so können Sie Spritzen, wo immer Sie es brauchen.:

@Injectable()
export class GlobalService{
  private value;

  constructor(){

  }

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

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

Können Sie diesen service in alle Module, aber es ist eine chance, die Sie erhalten mehrere Instanzen. Daher stellen wir den Dienst ein singleton.

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

Sollten Sie rufen die forRoot Methode nur in Ihrem AppModule:

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

InformationsquelleAutor der Antwort Robin Dijkhof

Ich habe das gleiche problem, die meisten die Komponente muss loggedInUser Informationen.
Für zB : Benutzernamen, Ihre bevorzugte Sprache, bevorzugte Zeitzone des Benutzers usw.

Also, für dieses, sobald der user sich anmeldet, können wir Folgendes tun :

Wenn alle Informationen in JWT Token oder /me RESTful Api, dann können Sie entschlüsseln des Tokens in einem der service.

zB: user.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);
  }

}

hält drei öffentliche Verhalten unterliegt, wer hört auf diese variable bekommt den Wert, wenn es sich ändern. Bitte überprüfen Sie die rxjs Programmierstil.

und jetzt, wo diese variable benötigt werden, einfach abonnieren von dieser Komponente.

ZB: NavComponent wird auf jeden Fall benötigt Benutzernamen. daher der code wird wie unter:

export class NavComponent implements OnInit {

    public username: string;

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

    ngOnInit() {
        this.userService.username.subscribe(data => {
          this.username = data;
        });        
    }
}

Daher reaktive Programmierung gibt eine bessere Lösung zu behandeln, die Abhängigkeit variable.

Den oben löst auch das problem, wenn die Seite schwer zu regenerieren, wie ich das speichern der Werte im localstorage-und Holen es im Konstruktor.

Bitte beachten Sie : Es wird davon ausgegangen, dass der Benutzer eingeloggt ist, die Daten kommen von JWT token, können wir auch den gleichen service(UserHttpService), wenn die Daten aus Restful Api. Eg: api/me

InformationsquelleAutor der Antwort virsha