Angular2 Передача данных по маршруту

Question

Я пытаюсь передать данные из формы в службу, но безуспешно. Мне удалось реализовать рабочую систему маршрутизации между главной страницей и страницей входа. Я хотел бы передать имя пользователя и пароль от LoginComponent к VehicleService и отобразить в настоящее время пользователя входа. Я пробовал:

1. Создание LoginService для передачи данных в VehicleService.

Вот код:

маршрутизатор

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

Упрощенная 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']); 
    } 
} 

упрощенный 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() из LoginComponent не передает данные, когда я отправить данные. Когда я использовал один компонент без системы маршрутизации, все было в порядке.

Спасибо.

Answer 1

При регистрации вы подписываетесь к значениям в LoginComponent:

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

Так информация о пользователе находится в вашем LoginComponent, но второй вы направляете от этого компонента вы теряете свои данные. Чтобы сохранить его во время сеанса, вы можете, например, использовать HTML localStorage, подробнее об этом here.

Так установить пользователя в localStorage Прежде чем перейти на страницу:

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

Затем в VehicleComponent вы извлекаете, что данные из LocalStorage и разобрать его. Я хотел бы добавить метод ввода в вашей службе, например, так:

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

, а затем в вашем VehicleComponent вызова, метод и получить текущий пользователь:

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

Тогда у вас есть доступ к вашему текущему пользователю в вашем VehicleComponent.

Помимо этого решения, есть возможность совместного использования, которое может сработать для вас: Components communicate via service. Но это может быть излишним, если вам не нужна услуга ни для чего другого.