Skip to main content
se añadieron 148 caracteres en el cuerpo
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

Básicamente, en el objeto de tipo AtivatedRoute tenemos observables que nos sirvesirven para suscribirnos a cambios en los parámetros enviados al componente.

Expliquemos un poco: Accedemos a la propiedad paramMap, esto porque paramMap detectará el cambio "incluso cuando se realiza en el mismo componente", y posteriormente mostramos en consola el id que pasaste por url, en este caso si te fijas uso el nombre del parámetro que pusiste en tus rutas path: 'playlist/:id' de la siguiente forma params.get('id').

Básicamente, en el objeto de tipo AtivatedRoute tenemos observables que nos sirve para suscribirnos a cambios en los parámetros enviados al componente.

Expliquemos un poco: Accedemos a la propiedad paramMap, esto porque paramMap detectará el cambio "incluso cuando se realiza en el mismo componente", y posteriormente mostramos en consola el id que pasaste por url.

Básicamente, en el objeto de tipo AtivatedRoute tenemos observables que nos sirven para suscribirnos a cambios en los parámetros enviados al componente.

Expliquemos un poco: Accedemos a la propiedad paramMap, esto porque paramMap detectará el cambio "incluso cuando se realiza en el mismo componente", y posteriormente mostramos en consola el id que pasaste por url, en este caso si te fijas uso el nombre del parámetro que pusiste en tus rutas path: 'playlist/:id' de la siguiente forma params.get('id').

Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

Puedes recibir el dato de la url utilizando ActivatedRoute según la documentación puedes ver lo que dice:

Provides access to information about a route associated with a component that is loaded in an outlet


Traducción:
Proporciona acceso a información sobre una ruta asociada a un componente que se carga en una toma de corriente

Básicamente, en el objeto de tipo AtivatedRoute tenemos observables que nos sirve para suscribirnos a cambios en los parámetros enviados al componente.

Veamos un ejemplo, en el método ngOnInit agregamos lo siguiente:

this.route.paramMap.subscribe((params: ParamMap) => {
  console.log('Esto recibo desde url:', params.get('id'));
});

Como puedes ver si la url es http://localhost:4200/playlist/2 en la consola deberías ver:

Esto recibo desde url: 2

Expliquemos un poco: Accedemos a la propiedad paramMap, esto porque paramMap detectará el cambio "incluso cuando se realiza en el mismo componente", y posteriormente mostramos en consola el id que pasaste por url.

Ahora según tu lógica "la cual no voy a corregir en este caso" iteras en el HTML comparando los id de los objetos y así mostrar el que ingresó por url, continuando con lo que ya hiciste la forma más sencilla que veo es usar una variable id que se igualará con el parámetro recibido por url como se ve a continuación.

public idPlaylist; // id ingresado por url

Y en el observable donde mostrábamos el mensaje en consola lo corregimos:

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

Quedando tu typescript de la siguiente forma:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-play-list',
  templateUrl: './play-list.component.html',
  styleUrls: ['./play-list.component.scss']
})
export class PlayListComponent implements OnInit {

  // teams$ = this.http.get('/ api / teams');
  playlists$: Observable<any> = this.http.get('/api/playlists');
  public idPlaylist; // id ingresado por url
  
  constructor(private http: HttpClient, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.idPlaylist = params.get('id');
    });
  }
}

Finalmente nos vamos al HTML y reemplazamos el id que utilizabas por la variable idPlaylist:

<div *ngFor="let playlist of playlists$ | async" class="top-info">
  <div *ngIf="playlist.id == idPlaylist"> <!-- Aquí va el id recibido por url -->
    <img src="{{playlist.avatar}}" alt="avatar" class="img-avatar" />
    <p>{{ playlist.name }}</p>
  </div>
</div>

De esta forma deberías poder cambiar entre playlist según cambies la url manualmente o por medio de un link.