2
votes

La navigation du routeur angulaire ne charge pas la page lorsque les paramètres de requête changent

J'ai un composant qui affiche le résultat d'une requête API. Je souhaite ajouter une liste déroulante pour que la liste puisse être filtrée, mais je n'arrive pas à faire recharger la page lorsque les paramètres de requête d'url changent.

export class ProductListComponent implements OnInit {

  public products: Array<object> = [];
  public manufacturers: any = [];
  public manufacturer: string = "";
  public search: string = "";

  constructor(private _assetService: AssetService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log(params);
      if('manufacturer' in params){
        this.manufacturer = params.manufacturer;
      }
      if('search' in params){
        this.search = params.search;
      }
    })

    this._assetService.getManufacturers().subscribe(data => {
      this.manufacturers = data;
    })

    this.loadProducts(); 
  }

  loadProducts(){
      this._assetService.getProducts(this.manufacturer,this.search).subscribe((data: ProductListResult) => {
      this.products = data.products;
    }) 
  }

  onManufacturerChange(newValue){
    this.router.navigate(['/products'], {queryParams: {manufacturer: newValue}});
  }
}

Et le typographie

<div>
  <H2>Products</H2>
  <form>
    Filter By Manufacturer
    <select (change)="onManufacturerChange($event.target.value)">
      <option value="">All</option>
      <option [value]="m" *ngFor="let m of manufacturers">{{m}}</option>
    </select>
  </form>
  <ul>
    <li *ngFor="let p of products"><B>{{p.manufacturer}}</B> - {{p.name}}</li>
  </ul>
</div>

Lorsque je change l'élément sélectionné dans la liste déroulante, l'URL affichée dans le navigateur change mais la page ne se recharge pas. Si j'actualise le navigateur manuellement avec l'URL souhaitée, la sortie correcte s'affiche. Si je change le chemin dans route.navigate vers une route totalement différente qui fonctionne correctement. Si j'ajoute un appel à loadProducts () après que le routeur en ait navigué, il recharge la page mais une sélection hors phase.

Tout ce que j'ai lu dit que si le tableau référencé dans ngPour les changements, il devrait mettre à jour automatiquement le DOM mais je n'arrive pas à le déclencher. Dois-je appeler une sorte de routine d'actualisation ou d'invalidation pour mettre à jour le DOM? Dois-je définir quelque chose dans le routeur pour reconnaître les modifications apportées aux paramètres de requête? Est-ce que je me trompe complètement?

angular angular-routing

2 commentaires

medium.com/@kevinkreuzer/…

essayez de mettre à jour vos queryParams comme ceci history.replaceState (null, null, 'URL' + '? id =' + id + '& role =' + role)

3 Réponses :

0
votes

il vous suffit de mettre à jour votre méthode onManufacturerChange en ajoutant un paramètre supplémentaire

ngOnInit(){
   this.route.queryParams.subscribe(params => {
        const manufacturer = params['manufacturer'];
        console.log('manufacturer',manufacturer);
      });
}

ici this.route sera une instance de ActivatedRoute et cela mettra à jour l'url de la route avec le paramètre de requête dynamique ici, c'est-à-dire fabricant

donc à l'intérieur de ngOnInit, vous obtiendrez la valeur du paramètre de requête mise à jour comme ceci

onManufacturerChange(newValue){
    this.router.navigate(['/products'], {queryParams: {manufacturer: newValue},relativeTo : this.route});
  }

1 commentaires

Merci, mais ne recharge toujours pas la page.

0
votes

Pour autant que je sache, il n'y a pas de moyen élégant pour que Angular recharge la page lorsque les paramètres de requête changent.

L'erreur dans mon code est que loadProducts () l'utilise. fabricant, je dois donc définir cela dans onManufacturerChange () . Il ne recharge pas la page mais il recharge les données et met à jour le DOM.

Ensuite, je dois créer une fonction updateRoute () qui est appelée après que subscribe a chargé le données de l'API. Les boutons Précédent et Suivant du navigateur ne fonctionnent toujours pas (ils parcourent les URL mais ne mettent pas à jour l'affichage), mais l'URL et l'affichage restent synchronisés. Assez proche pour le moment.

  loadProducts() {
    this._assetService.getProducts(this.manufacturer,this.search).subscribe((data: ProductListResult) => {
      this.products = data.products;
      this.updateRoute();
    })
  }

  onManufacturerChange(newValue){
    this.manufacturer = newValue;
    this.loadProducts();
  }

  updateRoute( ){
    var queryParams = {};
    if (this.manufacturer!= "" ){queryParams['manufacturer'] = this.manufacturer;}
    if (this.search!= "" ){queryParams['manufacturer'] = this.search;}
    this.router.navigate(['/products'], {queryParams: queryParams});
  }

0 commentaires

0
votes

Depuis Angular v5 , il existe désormais une option sur la classe Router onSameUrlNavigation

Comment gérer une demande de navigation vers l'URL actuelle. L'un des:

'ignore': le routeur ignore la demande.

'reload': le routeur recharge l'URL. À utiliser pour mettre en œuvre une fonctionnalité "d'actualisation".

Dans le fichier de routage principal de l'application, définissez la valeur sur 'reload':

RouterModule.forRoot(
  routes,
  { onSameUrlNavigation: 'reload' }
)

0 commentaires