Angular2 Übergeben Sie Datenwerte auf Route

Question

Ich versuche, Daten von Formular an Dienst, aber ohne Erfolg übergeben. Ich habe es geschafft, ein funktionierendes Routing-System zwischen Hauptseite und Login-Seite zu implementieren. Ich möchte den Benutzernamen und das Passwort von LoginComponent an VehicleService weitergeben und den derzeit angemeldeten Benutzer anzeigen. Ich habe versucht:

1. Erstellen Sie LoginService, um Daten an VehicleService zu übergeben.

Hier ist der Code:

Router

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { VehicleComponent } from './vehicle.component'; 
import { LoginComponent } from './login.component'; 

const routes: Routes = [ 
    { path: '', redirectTo: '/vehicle', pathMatch: 'full' }, 
    { path: 'vehicle', component: VehicleComponent }, 
    { path: 'login', component: LoginComponent } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

VehicleService

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Md5 } from 'ts-md5/dist/md5'; 

import { User } from './user'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class VehicleService { 
    private defUrl = 'dummywebiste.com'; 

    constructor(private http: Http) { } 
    getVehicle(username?: string, password?: string) { 
     const url = (!username || !password) ? this.defUrl : 'dummywebiste.com' + username + '/' + Md5.hashStr(password); 
     return this.http.get(url) 
      .map(res => res.json()); 
    } 
} 

Vereinfachte VehicleComponent

@Component({ 
    selector: 'vehicle-json', 
    templateUrl: './vehicle.html', 
    providers: [VehicleService] 
}) 
export class VehicleComponent { 
    public vehicles: GeneralVehicle[]; 

    constructor(private vehicleService: VehicleService, private router: Router) { 
    this.vehicleService.getVehicle().subscribe(vehicle => { 
     this.vehicles = vehicle; 
    }); 
    } 

    toLogin(): void { 
    console.log("toLogin button"); 
    this.router.navigate(['/login']); 
    } 
} 

Simplified LoginComponent

@Component({ 
    selector: 'login', 
    templateUrl: './login.html', 
    providers: [VehicleService] 
}) 
export class LoginComponent implements OnInit { 
    public user: FormGroup; 

    ngOnInit() { 
     this.user = new FormGroup({ 
      username: new FormControl('', Validators.required), 
      password: new FormControl('', Validators.required) 
     }); 
    } 

    constructor(public vehicleService: VehicleService, private location: Location, private router: Router) { } 

    onSubmit(user) { 
     this.vehicleService 
      .getVehicle(user.value.username, user.value.password) 
      .subscribe(user => { 
       this.user = user; 
       //this.user.reset(); 
       this.router.navigate(['/vehicle']); 
       console.log("Submit button"); 
      }); 
    } 
    goBack(): void { 
     console.log("Back button"); 
     this.location.back(); 
    } 
} 

onSubmit() von LoginComponent keine Daten übergeben, wenn ich die Daten eintragen. Als ich eine Komponente ohne Routing-System verwendet habe, war es in Ordnung.

Danke.

Answer 1

Wenn Sie in dem Sie sich anmelden in der LoginComponent auf die Werte abonniert:

.subscribe(user => { 
    this.user = user; // values are here 
    this.router.navigate(['/vehicle']); // values lost when navigating away 

So ist der Benutzer Informationen in Ihrem LoginComponent ist, aber die zweite Sie Weg weg von dieser Komponente, die Sie Ihre Daten verlieren. Um es während einer Sitzung zu speichern, können Sie z. B. HTML localStorage verwenden, mehr dazu here.

gesetzt Um dem Benutzer die in localStorage bevor sie von der Seite verlassen:

.subscribe(user => { 
    this.user = user; 
    localStorage.setItem('currentUser', JSON.stringify(this.user)); 
    this.router.navigate(['/vehicle']); 

Dann in Ihrem VehicleComponent Sie abrufen, die Daten aus dem localstorage und es analysieren.

getUser(): any { 
    return JSON.parse(localStorage.getItem('currentUser')); 
} 

und dann in Ihrem VehicleComponent Anruf, dass Verfahren und erhalten den aktuellen Benutzer: Ich würde ich Methode in Ihren Diensten, wie so hinzufügen

ngOnInit() { 
    this.user = this.vehicleService.getUser(); 
} 

Dann haben Sie Zugriff auf Ihre aktuellen Benutzer haben in Ihrem VehicleComponent.

Abgesehen von dieser Lösung gibt es auch eine Option für einen gemeinsam genutzten Dienst, der für Sie arbeiten könnte: Components communicate via service. Aber das ist vielleicht zuviel, wenn Sie den Dienst für nichts anderes brauchen.