El funcionamiento es muy similar al del componente "cargando" de la entrada anterior. Básicamente se trata de un componente que mostraremos u ocultaremos según se haya producido o no un error.
Aunque lo más correcto sería crearnos un componente específico, tal y como hicimos con el componente "cargando", para utilizarlo en cualquier otro componente, en esta ocasión vamos a crear el mensaje directamente en el componente home, ya que es el único sitio donde vamos a mostrarlo.
Modificamos el TypeScript del componente "home" como sigue:
Como se puede ver, primero creamos dos variables. Una booleana que nos indicará si hay o no un error, y una string que guardará el mensaje de error recibido para mostrarlo por pantalla.
En el constructor, inicializamos la variable "error" booleana a falso, ya que por defecto no hay ningún error.
En la llamada al servicio de Spotify, implementamos la función del error (cuando falla la llamada al servicio) y en su interior ponemos a falso la variable del componente "cargando" (para que desaparezca de la pantalla), ponemos a verdadero la variable booleana "error", y guardamos en la variable "mensajeError" el error que nos devuelve el servicio de Spotify.
A continuación modificamos el html del componente "home" como sigue:
Como se puede ver, hemos añadido un div con un *ngIf para que aparezca sólo cuando la variable "error" sea verdadera, y mostramos la variable "mensajeError" con el contenido del error que nos devuelva el servicio.
Si se produce algún error, el mensaje se vería como sigue:
Y eso sería todo.
No hay comentarios:
Publicar un comentario