componente Listar libros parametrizado

Componente Listar libros parametrizado

El requerimiento es que queremos, en el caso del autor ver todos los libros de ese autor, de la editorial y del libro, ver todos los libros excepto el que se seleccionó.

Para resolver esto, hemos decidido cambiar el componente de listar libros BookListComponent para que reciba un query param que le indique si debe mostrar todos los libros o si debe mostrar solo la lista de libros que recibe de parámetro.

Lista de libros como parámetro

Para que el componente reciba la lista para mostrar, declaramos un atributo anotado con @Input, así:

...
export class BookListComponent implements OnInit {

    @Input() books: Book[];
...
}

Si tomamos el caso del despliegue de un autor donde queremos que en la parte de abajo aparezca la lista de sus libros, en el template de author-detail.component.html tenemos:

...
<div class="border margin">
   <p class="h3 p-3">Books by this author : </p>
    <app-book-list [books]="authorDetail.books"></app-book-list>
</div>
...

app-book-list es el selector del componente BookListComponent .

El parámetro books [books] recibe por valor los libros del autor que fue seleccionado: "authorDetail.books"

Mostrar todos los libros

Cuando desde el menú se selecciona Books en la definición de la navegación en el template del componente principal app.component.html indicamos que se debe ir a BookListComponent lo que significa desplegar su template. En este caso no estamos utilizando el selector directamente y no podemos pasarle el valor de la lista de los libros completa.

Para resolver esto, utilizamos un queryParam para indicar que tenemos que desplegar todos los libros. EN el browser el path que es:

http://localhost:4200/books/list?allbooks=yes

allbooks es el atributo del queryParam y yes es el valor.

Para que el componente pueda obtener ese query param debemos:

1. Enviarlo en path o la ruta
2. Sacarlo de la ruta

Para enviarlo, debemos cambiar en el menú principal app.component.html:

 <a id="booksTag" class="nav-link" routerLink="/books/list">Books</a>

Por:

 <a id="booksTag" class="nav-link" [routerLink]="['/books/list']" [queryParams]="{allbooks: 'yes'}">Books</a>

Para Sacarlo de la ruta debemos escribir en el método ngInit del BookListComponent:

...

  ngOnInit() {
     this.route.queryParams
      .filter(params => params.allbooks)
      .subscribe(params => {
        console.log(params); 

        this.allbooks = params.allbooks;
        console.log(this.allbooks); 
      });
      if (this.allbooks == 'yes'){
          console.log("allbooks");
      
       this.getBooks();
       }
    } 
...

Volver Paso 2