Onde está o problema que eu acompanhei através do console.log():
1) Quando inicio a aplicação e faço a pesquisa, ele retorna os dados. Isso acontece porque ele entra no onInit do houseListComponent.
2) Se eu clico para voltar para o menu principal, ele destroi o componente e eu posso fazer nova pesquisa.
3) Entretanto, se eu tentar fazer duas pesquisas seguidas, ele não muda os dados. O houseService vai ao banco de dados e faz a pesquisa, mas os dados não são disponibilizados para a aplicação, que está a cargo do OnInit().
No appComponent.html
<div class="form-inline my-2 my-lg-0">
<form [formGroup]="searchForm" class="form mt-4" (submit)="pesquisar()">
<div class="form-group">
<input
formControlName="searching"
class="form-control mr-sm-2"
type="search"
placeholder="searching for ..."
aria-label="Search"
autofocus>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
[disabled]="searchForm.invalid">Search
</button>
</div>
</form>
</div>
// No appComponent.ts:
pesquisar() {
const searching = this.searchForm.get('searching').value ;
this.router.navigate(['/houses/', searching]);
}
// No appRouting.module
const routes: Routes = [
{ path: 'houses/:searching',
component: houseListComponent,
resolve: {
houses: houseResolver }
},
// No housesResolve
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<house[]> {
const searching = route.params.searching ;
if (searching) {
return this.houseService.searchhouse(searching);
}
return of(null);
}
}
// No houseService:
searchhouse( searching: string ) {
this.endereco = API + 'localiza?palavra=' ;
return this.http.get<house[]>(this.endereco + searching).pipe(
retry(1),
catchError(e => throwError(e)) ) ;
}
// houseListComponent:
export class houseListComponent implements OnInit, OnDestroy {
@BlockUI() blockUI: NgBlockUI;
searching = '' ;
houses: house[] = [];
inscricao: Subscription ;
constructor( private route: ActivatedRoute ) { }
ngOnInit() {
console.log('3 - OnInit do houseList');
this.inscricao = this.route.params.subscribe(
(params: any) => {
this.searching = params.searching ;
}
);
if (this.searching) {
this.houses = this.route.snapshot.data.houses;
}
}
ngOnDestroy() {
console.log('OnDestroy do houseList');
this.inscricao.unsubscribe() ;
}
}
// No houseListComponent.html
<div style="height: 50px" class="row" *ngFor="let house of houses">
<div class="col-md-3">{{house.titulo}}</div>
<div class="col-md-4">{{house.endereco}}</div>
</div>
