how to pass id to the routing table

Question

How to pass id to the routing table?

http://localhost:4200/user/products/undefined

src/app/product.module.ts:

const routes = [
  {
    path: `user/products/:userid`,
    canActivate: [AuthGuard],
    component: UserProductsComponent
  },  {
    path: 'users/products',
    component: UsersProductsComponent
  }];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UserProductsComponent, UsersProductsComponent],
  providers: [
    AuthService,
   // AuthGuard
  ],
  exports: [ UserProductsComponent, UsersProductsComponent, FormsModule ]
})
export class ProductModule { }

src/app/products.service.ts:

How to pass a userid to the getProducts(userid) method. Even after refreshing the page?

@Injectable()
export class ProductsService {

  public jwtToken: string;

  constructor(private http: Http) {
    const theUser: any = JSON.parse(localStorage.getItem('currentUser'));
    if (theUser) {
      this.jwtToken = theUser.token;
    }
  } 

  getProducts(userid) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', `${this.jwtToken}`);
    let options = new RequestOptions({ headers: headers });

    return this.http.get(`http://localhost:4200/user/products/${userid}`, options)
      .map((response: Response) => response.json())
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

in the link was also userid

src/app/navbar/navbar.component.ts:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" *ngIf="!!authService.isLoggedIn_()" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      My profil
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" >
      <a class="dropdown-item" [routerLink]="['user/products/',userid]">List products</a>

      <a class="dropdown-item" href="#" (click)="logout()">logout</a>
    </div>
</li>

score 0 · Answer 1 · answered Apr 01 '18 at 23:26

0

Try this.

const routes = [
{
  path: `user/products/:id`, //id NOT userid
  canActivate: [AuthGuard],  //comment this until you get a valid route.
  component: UserProductsComponent
},  {
  path: 'users/products',
  component: UsersProductsComponent
}];

Hope this helps. Let me know if you have any other questions. I am also building a large scale shopping cart with mongodB and you will find a lot of informations regarding shopping cart if you see my profile. Just for your information, I allow anyone to visit my shopping app without signing on in my code and ONLY then they can checkout if they are signed on. Have a nice day.

answered Apr 01 '18 at 23:26

harold_mean2

238
1
14

did not work. `Lista produktów` `const routes = [{ path: 'user/products/:id', // canActivate: [AuthGuard], component: UserProductsComponent }];` I do not know where to improve? – user2129896 Apr 02 '18 at 08:51
this is `List products` or `List products`but it does not insert the correct id `http://localhost:4200/user/products/$%7Buserid%7D` the correct user id is like this `5ab425c6f5bff145304092f7` – user2129896 Apr 02 '18 at 09:04
in class `/user-products.component.ts` method `ngOnInit() { this.route.params.subscribe(res => console.log('res.id --> ' + res.id)); }` returs: `res.id --> ${userid}` @harold_mean2 Could you please help me? – user2129896 Apr 02 '18 at 10:36
@user2129896. Are you trying to get the cart items of the current user or are your trying get the product detail or from your product list? This is how I implement when the user wants to see his/her cart. https://stackoverflow.com/questions/49341139/how-do-i-structure-this-in-angular-multiple-components-requesting-same-data-fro – harold_mean2 Apr 03 '18 at 00:51
@user2129896. I am still learning how to code. I work full-time in hardware during the day so I will try to answer your questions when I get a chance. – harold_mean2 Apr 03 '18 at 01:38
the task solution is here. I added `api` to the server and service prefix https://stackoverflow.com/questions/49612529/after-refreshing-the-page-does-not-load-angular/49630057#49630057 – user2129896 Apr 03 '18 at 12:35

how to pass id to the routing table

1 Answers1