Angular. Получить params и queryParams одновременно

Допустим необходимо из url /auth/{session}?server={id} достать session и id. Для такой задачи подходит rxjs оператор combineLatest:

combineLatest(
  this._activatedRoute.params,
  this._activatedRoute.queryParams
)

Он отправит массив из 2 элементов.

import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { combineLatest, Subscription } from 'rxjs';

@Component({
  selector: 'my-selector',
  template: `LOADING...`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent implements OnInit, OnDestroy {
  private _routerSubscription: Subscription;

  constructor(private _activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    // params забирает session, queryParams - id
    this._routerSubscription = combineLatest(
      this._activatedRoute.params,
      this._activatedRoute.queryParams
    ).subscribe(([session, id]) => {
      console.log(session, id);
    });
  }

  ngOnDestroy(): void {
    if (this._routerSubscription) {
      this._routerSubscription.unsubscribe();
    }
  }
}

Похожие записи

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

08 января 2019 г. в Angular

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
20 августа 2018 г. в Angular

Angular attribute setter

Пример задания значения булева Input свойства как директивы, на примере:

09 октября 2018 г. в Angular

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

15 сентября 2019 г. в Angular

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).