Question

我在功能模块的Angular 7应用程序中包括路由。属于此功能的组件需要获取route参数。我该怎么做？

我尝试使用文档中显示的方法，如下面的代码所示。我已经评论了哪个有效，哪个无效。我想使用第二种方法，因为它会将结果映射到将在模板中使用的products$可见对象，因此无法使用。可能是什么问题？

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from "@angular/router";
import { Observable } from "rxjs";
import { switchMap } from "rxjs/operators";

import { Product } from "@shared/interfaces/product.interface";

import { ProductsService } from "../products.service";

@Component({
  templateUrl: "./product-list.component.html",
  styleUrls: ["./product-list.component.css"]
})
export class ProductListComponent implements OnInit {
  products$: Observable<Product[]>;

  constructor(
    private route: ActivatedRoute,
    private service: ProductsService
  ) {}

  ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      console.log(params.get("category")); // this works
    });

    this.products$ = this.route.paramMap.pipe(
      switchMap(params => {
        console.log(params.get("category")); // this doesn't work
        return this.service.getProducts(params.get("category"));
      })
    );
  }
}

我希望第二种方法记录结果，但完全没有。

Answer 1

rxjs的可观察对象是惰性的，因此，如果未进行任何订阅，则您的源甚至不会尝试获取数据。在ngOnInit的末尾添加this.products$.subscribe()，您将看到console.log结果。

Answer 2

我接受了安德烈（Andrei）的回答，但我也了解到添加|模板文件中的异步解决了该问题，因为正如Andrei指出的那样，尚未进行任何订阅

Answer 3

Andrei是真实的rxjs observables是一个懒惰的问题，可以通过添加this.products$.subscribe()来解决，但与angular Router不同，其他服务订阅直到您取消订阅后才会停止。因此，请记住退订ngOnDestroy（）

如何从Angular中的URL获取参数

3 个答案: