Angular2経路上のデータ値を渡す

Question

フォームからサービスにデータを渡そうとしていますが、成功しません。メインページとログインページの間にルーティングシステムを実装することができました。 LoginComponentからのユーザー名とパスワードをVehicleServiceに渡して、現在のログオンユーザーを表示したいと思います。私が試した：

1. はVehicleServiceにデータを渡すためにLoginServiceを作成します。

ここでは、コードです：

ルータ

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

は、 LoginComponentから

@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()私はデータを送信する際に任意のデータを渡しません。私が1つのコンポーネントw/oルーティングシステムを使用していたとき、それは問題ありませんでした。

ありがとうございました。

Answer 1

あなたはあなたの中にログインしているLoginComponentの値に加入されています

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

したがって、ユーザー情報があなたのLoginComponentであるが、あなたのルート秒が離れて、​​あなたのデータを失っているそのコンポーネントから。セッション中に保存するには、たとえばlocalStorageというHTMLを使用できます。詳しくはhereをご覧ください。

ので、ページから移動する前にlocalStorageにユーザーを設定します。

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

次に、あなたのVehicleComponentにあなたがのlocalStorageからのデータとすると、それを解析することを取得します。そして、あなたはあなたの中にあなたの現在のユーザーへのアクセス権を持っている

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

：現在のユーザーの方法と得ることをごVehicleComponentコールで

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

、その後：私はそうのように、あなたのサービスでIメソッドを追加しますVehicleComponent。

このソリューションとは別に、共有サービスのオプションもあります：Components communicate via service。しかし、あなたが何かのためにサービスを必要としないなら、それは残酷かもしれません。