Угловая навигация маршрутизатора не загружает страницу при изменении параметров запроса - PullRequest
Новая
       13

Угловая навигация маршрутизатора не загружает страницу при изменении параметров запроса

1 голос
/ 13 марта 2019

У меня есть компонент, который отображает результат запроса API. Я хочу добавить раскрывающийся список, чтобы список можно было отфильтровать, но я не могу перезагрузить страницу при изменении параметров URL-запроса. 

<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>

И машинопись 

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}});
  }
}

Когда я меняю элемент, выбранный в раскрывающемся списке, URL-адрес, отображаемый в браузере, изменяется, но страница не перезагружается. Если я обновлю браузер вручную с нужным URL-адресом, будет показан правильный вывод. Если я изменю путь в route.navigate на совершенно другой маршрут, который работает правильно. Если я добавлю вызов loadProducts () после того, как маршрутизатор переместится, некоторые из них перезагружают страницу, но один выбор не в фазе.

Все, что я прочитал, говорит о том, что если массив, указанный в ngFor, изменится, он должен автоматически обновить DOM, но я не могу его запустить. Нужно ли вызывать какую-то процедуру обновления или аннулирования для обновления DOM? Нужно ли что-то устанавливать в маршрутизаторе для распознавания изменений параметров запроса? Я все об этом ошибаюсь?

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

Насколько я могу судить, нет элегантного способа заставить Angular перезагрузить страницу при изменении параметров запроса.

Ошибка в моем коде состоит в том, что loadProducts () используетthis.manufacturer, поэтому мне нужно установить это в onManufacturerChange () .Он не перезагружает страницу, но перезагружает данные и обновляет DOM.

Затем мне нужно создать функцию updateRoute () , которая вызывается после того, как подписка загрузит данные изapi.Кнопки «Назад» и «Вперед» в браузере по-прежнему не работают (он перемещается по URL-адресам, но не обновляет отображение), но в противном случае URL-адрес и отображение остаются синхронизированными.Пока достаточно близко. 

  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 голосов
/ 13 марта 2019

вам просто нужно обновить ваш метод onManufacturerChange , добавив один дополнительный параметр

относительный 

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

здесь это.маршрут будет экземпляром ActivatedRoute , и это обновит URL-адрес маршрута с параметром динамического запроса, то есть производитель

, поэтому внутри ngOnInit вы получите обновленный параметр запросазначение как это 

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

Дайте мне знать, если это поможет вам, счастливое кодирование !!!

...