CODEWITHSUNDEEP
angulartypescriptangular2-routing
Dave
Dave

Reputation: 334

How to pass a second route parameter to angular 2 services module?

I am new to angular 2 and would appreciate input on how to pass multiple parameters to angular's service module. For example here is the first param that i am passing to the service via the router link.

home-component.html

<a href="#" [routerLink]="['/product', product.slug]">

which is mapped to the route defined below in app.routes.ts and loads the ProductOverviewComponent.

const appRoutes: Routes = [
{ path: 'product/:slug', component: ProductOverviewComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },

// otherwise redirect to home
{ path: '**', redirectTo: '' }
];

product-overview.component.ts calls the getProductOverview() method.

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
    let slug = params['slug'];
    console.log('getting product with slug: ', slug);
    this.productoverviewservice.getProductOverview(slug)
    .subscribe(p => this.product = p);
  });
}

which calls the getProductOverview method from product-overview.service.ts

getProductOverview(slug: string): Observable<Course> {
    let product$ = this.http
        .get(`${this.baseUrl}${slug}/` , options)
        .map((response: Response) => response.json());
}

My question is how to I pass a second route parameter to the function getProductDetail?

for example: 

getProductDetail(slug: string): Observable<Course> {
    let productDetail$ = this.http
        .get(`${this.baseUrl}${slug}/${slug2}` , options)
        .map((response: Response) => response.json());
}

Any input is much appreciated.

Upvotes: 1

Views: 2387

Answers (1)

Octavio Garbarino
Octavio Garbarino

Reputation: 772

You should have the routing like this:

{path: 'product/:slug/:slug2', component: ProductOverviewComponent, canActivate: [AuthGuard] }])

And it should works!

Upvotes: 2

Related Questions