代码之家 › 专栏 › 技术社区 › Yahya Essam

如何使用route参数作为服务方法的参数?

angular-services angular-routing rxjs typescript angular

Yahya Essam · 技术社区 · 7 年前

我正在尝试将产品详细信息转换为单一产品的路线。目前为止我有id参数的单个产品的路线,它工作正常

{ path: 'single-product/:id', component: SingleProductComponent }

在组件类型脚本中:

 id: string;
 private mainSub: any;
 public ngOnInit(): void {
  this.mainSub = this.route.params.subscribe(params => {
     this.id = params['id'];
  }
   this.productsService
    .all()
    .map(res => res.filter(item => item.id === this.id))
    .subscribe(resp => console.log(resp));      
 });
 }

在控制台中,我得到了正确的产品,但如何才能将数据获取到视图中?

2 回复 | 直到 7 年前

Jota.Toledo 7 年前

第一件事第一:

让我们在服务类中封装该筛选器逻辑:

export interface Product {
 // define the properties for your product
}

@Inject()
export class ProductService {
 ....
 // constructor injetction and other methods
 ....

 all(): Observable<Product[]>{
   // implementation
 }

 getById(id:string): Observable<Product> {
   // or maybe could your backend offer an endpoint that does this for you?
   // something like `root/api/products/:id`;
   return this.all().map(products => products.find(product => product.id === id));
 }
}

现在我们可以回到组件:

import 'rxjs/add/operator/switchMap'; // Maybe replace with lettable operators

@Component({...})
export class FooComponent {
 product$: Observable<Product>;
 constructor(private _route: ActivatedRoute, private _productService: ProductService){
    this.product$ = _route.paramMap
       .map(params => params.get('id')) // maps the route params. map to the id key
       .switchMap(id => _productService.getById(id));// change the main stream to the stream returned by the service
 }
}

现在,在模板中,您可以使用一个小技巧来访问 product$ 流:

<ng-container *ngIf="product$ | async as product">
   {{ product | json }}
   // your template goes here
</ng-container>

Sandip Jaiswal 7 年前

使用以下代码在组件中实现:

 id: string;
 product: any;
 private mainSub: any;
 public ngOnInit(): void {
  this.mainSub = this.route.params.subscribe(params => {
     // I used + sign if id is number otherwise remove it
     this.id = +params['id'];
     this.productsService
      .all()
      .map(res => res.find(item => item.id === this.id))
      .subscribe(resp => this.product = resp);      
    });
  }
 }

现在在html模板中使用数据,如下所示(伪html):

<table>
  <tr>
    <td>Product Name</td>
    <td>{{product.productName}}</td>
  </tr>
</table>

推荐文章

Fahad Subzwari · 我不能用rxjs过滤器过滤记录?

2 年前

Fazla Elahi Md Jubayer · 在rxjs中使用管道内的两个concatmap时,如何提取订阅块内的结果

3 年前

Irakli · 我想以角度显示id相似的数据

3 年前

Akash · 当BehaviorSubject发出两次真值时,使ngOnChange被激发

6 年前

Shamshiel · 将rxjs升级到6后,类型“Observable”上不存在属性“map”

6 年前

Corey Cole Roberto Tyley · 使用RxJS 6。x WebSocketSubject客户端

6 年前

gog · 如何观察rxjs中的属性更改?

6 年前

jesdynf · 在继续之前,如何使角度拦截器延迟?

6 年前

Sean Ivins · 角度2+HttpIntercept:在返回intercept函数之前,等待来自服务器的令牌

6 年前

Kevin Kalitowski · RxJs 6:从Observable获取ConnectableObservable

6 年前