Angular2 Pass data values on route

Question

I'm trying to pass data from form to service, but with no success. I managed to implement working routing system between main page and login page. I'd like to pass username and password from LoginComponent to VehicleService and display currently logon user. I tried:

Create LoginService to pass data to VehicleService.

Here's the 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());
    }
}

Simplified 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() from LoginComponent doesn't pass any data when I submit the data. When I was using one Component w/o routing system, it was fine.

Thanks.

What do you mean, the onSubmit method is not fired, or you are not able to extract the values from the form? — AVJT82
– AVJT82, Commented Feb 2, 2017 at 14:58
..or do you expect that after login and navigating to vehicles that the user info would follow? You are subscribing the value in LoginComponent, so the values are there, but when you navigate away from that component you are losing the user. If you want to store it so that it's available in the app you need to use localstorage or service to stash the user values. — AVJT82
– AVJT82, Commented Feb 2, 2017 at 15:08

AVJT82 · Accepted Answer · 2017-02-02 15:24:07Z

1

When you are logging in you are subscribing to the values in the LoginComponent:

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

So the user info is in your LoginComponent, but the second you route away from that component you are losing your data. To store it during a session, you can e.g use HTML localStorage, more about that here.

So set the user in localStorage before navigating away from the page:

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

Then in your VehicleComponent you retrieve that data from the localStorage and parse it. I would add I method in your service, like so:

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

and then in your VehicleComponent call that method and get the current user:

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

Then you have access to your current user in your VehicleComponent.

Apart from this solution, there is a option of a shared Service as well that could work for you: Components communicate via service. But that might be overkill if you do not need the service for anything else.

answered Feb 2, 2017 at 15:24

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Haseoh Over a year ago

Thank you for your comprehensive answer, it points out everything. It seems, I didn't understand my own code, that's why my question was wo twisted. I checked the shared service option earlier, but it was way too complex for such a basic functionality.

AVJT82 Over a year ago

No problem, glad I could help! :) And yeah, that was what I figured - that shared service would be overkill for this task, localStorage should do well for your purpose :)

Collectives™ on Stack Overflow

Angular2 Pass data values on route

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related