路由器不传输id - Angular

时间:2018-03-28 12:21:05

标签: angular

路由器不传输ID。

刷新页面后的值http://localhost:4200/user/products/$%7Bid%7D未通过:

的src /应用程序/核心/导航栏/ navbar.component.html:

${userid}

选择<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" style="background-color:#71b9d4; opacity: 0.9; filter: Alpha(opacity=90); color:white"> <a class="dropdown-item" routerLink="user/products/${userid}">List products</a> </div> </li> 后,应显示此页面:

routerLink ="user/products/${userid}"

刷新页面时显示: <div class="col"> <div class="panel-heading"> Add product </div> <div class="col"> <div class="panel-body"> <form [formGroup]="produktForm" (ngSubmit)="saveProduct(produktForm.value)"> <label for="product_name">Name product </label> <input type="text" name="product_name" class="form-control" formControlName="product_name" [(ngModel)]="product_name"/> <button type="submit" class="btn btn-success">Add product...</button> </form> </div> </div> </div> <div class="col"> <div class="panel-heading"> Your product list </div> <table class="table table-hover"> <tr> <td>Product name</td> <td colspan="2">Action</td> </tr> <tr *ngFor="let product of products_; let productIndex = index"> <td><input required value="{{product.product_name}}" name="product.product_name" class="form-control" [(ngModel)]="product.product_name" /></td> <td><button type="submit" class="btn btn-success" (click)="updateProduct(product)" >Edition</button></td> <td><button type="submit" class="btn btn-danger" (click)="deleteProduct(productIndex, product._id)" >Delete</button></td> </tr> </table> </div>

的src /应用/ products.service.ts:

{"success":true,"data":[]}

代码server.js包含:

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

方法app.get('/user/products/:id', product.selectproducts);

product.selectproducts

如何在页面刷新后获取值exports.selectproducts = function (req, res, next) { products.find({ userid: req.params.id }).exec(function (err, product) { if (err) { res.status(400).json({ success: false, message: 'Error processing request ' + err }); } res.status(201).json({ success: true, data: product }); console.log(product); }); }

1 个答案:

答案 0 :(得分:1)

你可以传递这样的参数:

[routerLink]="[ 'user/products', { id: userid } ]"

您也可以使用

之类的语法
[routerLink]="'user/products/' + userid"

routerLink="user/products/{{ userid }}"