Как в RxJS подписаться на два события и первое событие использовать в другом?

Question

[Speakermen]

Не могу придумать лучше этого не рfбочего кода(

this.albumsService
      .findAll()
      .pipe(
        map((albums) =>
          albums.filter(
            (album) =>
              album.genre ===
              this.route.paramMap
                .pipe(switchMap((params) => params.getAll('id')))
                .subscribe((data: string) => (this.id = +data)),
          ),
        ),
      )
      .subscribe((data: AlbumsInterface[]) => (this.albums = data));

import { map, switchMap } from 'rxjs';
import { AlbumsService } from './../../services/albums.service';
import { Resolve, ActivatedRoute } from '@angular/router';
import { AlbumsInterface } from './../../interfaces/albums.interface';
import { Component, OnInit, Type } from '@angular/core';

@Component({
  selector: 'page-genres',
  templateUrl: './genres.page.html',
  styleUrls: ['./genres.page.css'],
})
export class GenresPage implements OnInit {
  private id!: number;
  public albums!: AlbumsInterface[];
  public title?: string | Type<Resolve<string>>;

  public constructor(
    private readonly route: ActivatedRoute,
    private readonly albumsService: AlbumsService,
  ) {
    //this.id = +this.route.snapshot.paramMap.get('id')!; не могу получать id так-как он статичный
  }

  public ngOnInit(): void {
    this.title = this.route.parent?.routeConfig?.title;
    //this.id = Number(this.route.snapshot.paramMap.get('id'));

    this.route.paramMap
      .pipe(switchMap((params) => params.getAll('id')))
      .subscribe((data: string) => this.id = +data); //динамичный но как использовать ниже

    console.log(this.id);

    this.albumsService
      .findAll()
      //.pipe(map((albums) => albums.filter((album) => album.id === 1)))
      //.pipe(map((albums) => albums.filter((album) => album.year === 2022)))
      .pipe(map((albums) => albums.filter((album) => album.genre === this.id)))
      .subscribe((data: AlbumsInterface[]) => (this.albums = data));
  }
}

Comments

[Speakermen]

костыли(

import { map } from 'rxjs';
import { AlbumsService } from './../../services/albums.service';
import { Resolve, ActivatedRoute, ParamMap } from '@angular/router';
import { AlbumsInterface } from './../../interfaces/albums.interface';
import { Component, OnInit, Type } from '@angular/core';

@Component({
  selector: 'page-genres',
  templateUrl: './genres.page.html',
  styleUrls: ['./genres.page.css'],
})
export class GenresPage implements OnInit {
  public albums!: AlbumsInterface[];
  public title?: string | Type<Resolve<string>>;

  public constructor(
    private readonly route: ActivatedRoute,
    private readonly albumsService: AlbumsService,
  ) {}

  public ngOnInit(): void {
    this.title = this.route.parent?.routeConfig?.title;

    this.route.paramMap.subscribe((params: ParamMap) => {
      this.findOne(+params.get('id')!);
    });
  }

  private findOne(genre: number) {
    this.albumsService
      .findAll()
      .pipe(
        map((albums: AlbumsInterface[]) =>
          albums.filter((album: AlbumsInterface) => album.genre === genre),
        ),
      )
      .subscribe((data: AlbumsInterface[]) => (this.albums = data));
  }
}