Как получить параметры из URL в Angular

Question

Я включил маршрутизацию в свое приложение Angular 7 на функциональном модуле.Компонент, принадлежащий этой функции, должен получить параметр маршрута.Как мне это сделать?

Я пытался использовать метод, показанный в документации, как показано в коде ниже.Я прокомментировал, какой из них работает, а какой нет.Я хочу использовать второй метод, который не работает, так как он сопоставляет результаты с наблюдаемой 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

Я принял ответ Андрея, но я также узнал, что добавление | async в файле шаблона решает проблему, потому что, как отметил Андрей, подписка еще не была

Answer 2

Андрей - правда, что наблюдаемые rxjs - это ленивая проблема, которую нужно решить, добавив this.products$.subscribe(), но в отличие от углового маршрутизатора, подписка на другие сервисы не остановится, пока вы не отмените подписку.Так что не забудьте отписаться в ngOnDestroy ()

Answer 3

Наблюдаемые rxjs ленивы, поэтому, если подписка не производится, ваш источник даже не пытается получить данные.Добавьте this.products$.subscribe() в конце ngOnInit, и вы увидите результат console.log.