1

Estoy haciendo una prueba con angular 8 y necesito pasar un id por url a un componente.

Tengo un componente llamado playlist el cual me pinta un nombre y un avatar. Utilizo json server para simular un api.

Tengo un directorio llamado api en el cual tengo un archivo db.json con el siguiente array de objetos playlist:

{
  "playlists": [
    {
      "id": 1,
      "name": "Playlist test 1",
      "avatar": "https://www.w3schools.com/howto/img_avatar.png"
    },
    {
      "id": 2,
      "name": "Playlist test 2",
      "avatar": "https://www.w3schools.com/howto/img_avatar2.png"
    },
    {
      "id": 3,
      "name": "Playlist test 3",
      "avatar": "https://www.w3schools.com/w3images/avatar2.png"
    }
  ]
}

Dentro del directorio api también tengo un archivo routes.json:

{
  "/api/*": "/$1"
}

En el archivo app-routing.module tengo el siguiente array de rutas:

const routes: Routes = [
  { path: 'home',component:HomeComponent },
  { path: 'item', component: ItemComponent },
  { path: 'playlist', component: PlayListComponent },
  { path: 'playlist/:id', component: PlayListComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

En cuanto al componente playlist en su archivo .ts tengo el siguiente código:

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

@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');
  
  constructor(private http: HttpClient) { }

  ngOnInit() {
    
  }

}

En el .html del playlist tengo:

<div *ngFor="let playlist of playlists$ | async" class="top-info">
  <div *ngIf="playlist.id == 1">
    <img src="{{playlist.avatar}}" alt="avatar" class="img-avatar" />
    <p>{{ playlist.name }}</p>
  </div>
</div>


<div class="options">
  <p>TENDENCIAS</p>
  <P>MIS SUSCRIPCIONES</P>
  <P>FAVORITOS</P>
  <P>RELACIONES</P>
</div>

<div class="main">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Tal y como lo tengo ahora, para mostrar los diferentes objetos playlist del db.json tengo que modificarlos manualmente en el .html del componente playlist poniendo:

playlist.id == 1
playlist.id == 2
playlist.id == 3

De esta forma me pinta el nombre y avatar del objeto 1, 2 o 3.

componente playlist

Lo que necesito es poder cargarle al componente playlist los distinto objetos por medio de la url, por ejemplo:

http://localhost:4200/playlist/1
http://localhost:4200/playlist/2
http://localhost:4200/playlist/3

No doy con la forma adecuada de hacerlo. ¿Alguien hizo algo similar?

Gracias de antemano, un saludo!

1 respuesta 1

3

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 sirven 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, 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').

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.