данные не обновляются на странице после перенаправления на тот же URL с разными параметрами - PullRequest
Новая
       15

данные не обновляются на странице после перенаправления на тот же URL с разными параметрами

0 голосов
/ 16 апреля 2019

В основном у меня есть компонент уведомлений, который показывает уведомление о щелчке значка в заголовке.Когда мы нажимаем значок в заголовке, он открывает всплывающее окно и показывает список уведомлений.При щелчке по любому из уведомлений он направляет пользователя к компоненту этого конкретного уведомления, как при щелчке по уведомлению, он ведет пользователя по этому маршруту: профиль / гость / {guestid} / alerts / {alertstid}.Но когда мы нажимаем на другое уведомление от вышеупомянутого маршрута, оно изменяет параметры маршрута, но не перезагружает данные нового предупреждения и показывает только данные старого маршрута.

Примечание: показанные данныеизвлекаются из маршрута разрешения.И поскольку компонент уже загружен, он не вызывает ngOnInit или функцию конструктора, когда мы нажимаем на другое уведомление.Но когда мы обновляем страницу, на ней отображаются правильные данные в соответствии с обновленным маршрутом.

Я попытался реализовать другое решение для конфигурации маршрутизатора, которое перезагружает данные разрешения.такие как runGuardsAndResolvers вместе с onSameUrlNavigation.

Я также пытался вызывать функции, которые устанавливают данные, в других хуках жизненного цикла угловых компонентов, таких как ngAfterViewInit или ngAfterViewChecked.

Я пробовал еще несколько решений, новсе они были бесполезны. 

 Notification.component.ts :-(inside header component in shared module)
/**
   * * Callback when user clicks on visit button in notification modal
   * @param notification : notification 
   */
  navigateToGuestOrCustomer(notification: notification) {
    let routePath =
      notification.model == ALERT_MODEL.GUEST ? "guest" : "customers";
    let routeParamId = notification.detail_id;
    let alertId = notification.id;
    this.router.navigate([`/profile/${routePath}/${routeParamId}/alerts/${alertId}`]);
  }


edit-alert.component.ts(inside profile module in guest component>alert component)

  ngOnInit() {
    this.fetchRouteData();
    this.setGuestId();
    this.setGuestName();
  }

  /**
   * * get guest name from route resolve
   */
  setGuestName(): void {
    let guestData = this.route.parent.snapshot.data["editGuestInfo"];
    this.guestName = guestData["name"];
  }

  formData: any;
  alertListForGuest = [];
  /**Fetch Data from Resolve */
  fetchRouteData() {
    this.formData = this.route.snapshot.data["alertDetailForGuest"];
    this.alertListForGuest = this.route.snapshot.data["alertListForGuest"];
    this.alertListForGuest.push(this.formData.alert);
  }

ожидаемый результат: после нажатия на другое уведомление параметры маршрута должны измениться и показать нужную страницу с обновленными данными.

фактический результат: толькоменяется маршрут, а не данные.

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

ngOnInit не может быть вызван снова, если изменяется только маршрут, но компонент не воссоздан. Вы должны подписаться на изменения маршрута и выполнить там свою логику получения и обновления 

import { ActivatedRoute } from '@angular/router`
constructor(private activatedRoute : ActivatedRoute){  }

ngOnInit() {
    this.activatedRoute.url.subscribe(url =>{
        // Code to get the new notification data 
        // and display it
    });
}

Таким образом, когда вы переходите на новый URL, код выполняется снова

0 голосов
/ 16 апреля 2019

Как вы сказали, он показывает новые данные после обновления страницы, поэтому в этом случае просто попробуйте реализовать Route Reload на той же странице, чтобы он перезагрузил текущий маршрут и получилвам новые данные.

...