Как сделать компонент в угловом рендеринге при смене маршрута?

Question

У меня есть Angular 7-компонент страницы, который содержит другой компонент. При выборе продукта из поля выбора на маленьком компоненте он переходит на другую страницу с тем же компонентом страницы (ProductDetails), но с другими параметрами в URL (другой идентификатор продукта).

Навигация по маленькому компоненту при выборе товара:

onProductSelected(args) {
    const selectedOption = args.target.value;
    this.router.navigate(['/products', selectedOption]);
  }

page-component ProductDetails.ts:

@Component({
    selector: 'product-details',
    templateUrl: './product-details.component.html',
    styleUrls: ['./product-details.component.scss']
})
export class ProductDetailsComponent implements OnInit, OnDestroy {
    currentProductId: string;
    product: ProductModel;
    subscriber;

    constructor(private productService: ProductService,
                private route: ActivatedRoute) {}

    ngOnInit() {
        this.currentProductId = _.get(this.route, 'snapshot.params.productId');
        this.subscriber = this.productService.getProdactById(this.currentProductId)
            .subscribe(res => {
                this.product = res;
            });
    }

    ngOnDestroy() {
        if (this.subscriber) {
            this.subscriber.unsubscribe();
        }
    }
}

Мне нужно ngOnInit компонента страницы, чтобы заметить, что URL изменился, и пересоздать себя. (чтобы получить новый параметр productId и отобразить детали продукта). Как я могу это сделать?

Спасибо!

Answer 1

Угловые параметры маршрутизатора являются наблюдаемыми. Это может быть использовано для подписки на изменения в значениях параметров, которые впоследствии могут быть переданы с помощью map или других операторов RxJs в сервис для манипулирования.

@Component({
    selector: 'product-details',
    templateUrl: './product-details.component.html',
    styleUrls: ['./product-details.component.scss']
})
export class ProductDetailsComponent implements OnInit {
    product$: Observable<ProductModel>;

    constructor(private productService: ProductService,
                private route: ActivatedRoute) {}

    ngOnInit() {
        this.product$ = route.params.pipe(
            map(params => params.productId),
            map(productId => this.productService.getProdactById(productId))
        );
    }
}

Теперь вы можете использовать наблюдаемые значения продукта в своем шаблоне, используя async pipe, и нет необходимости обрабатывать подписку:

<div *ngIf="product$ | async as product">
  <p>Product name {{product.name}}</p>
</div>

См. Пример в этом stackblitz