Angular переходить к одному и тому же компоненту более одного раза

Я пытаюсь перейти к тому же маршруту, используя [routerlink] на панели навигации. поскольку в angular перенаправление на тот же компонент для вызова ngOnint невозможно, я столкнулся с этой проблемой.

навигация на панели навигации

[routerLink]="['/customer/events']"

код в конструкторе

  constructor(
     private navbarService: ServicesInterCustomerNavbarService,
     private router: Router,
     private route: ActivatedRoute
  ) {
     this.route.params.subscribe(params => {
       this.selectedEventId = params["id"];
       this.getfunction();
    });
 }

мой ngOnInit, как показано ниже

ngOnInit() {
    this.ongoing = [];
    this.navbarService.sendCurrentRoute("home");
    this.route.firstChild && this.route.firstChild.params.subscribe(params => {
      this.selectedEventId = params["id"];
      this.getfunction();
    });
}
getfunction() {
    this.ongoing = [];
    this.eventService.getOnging().subscribe(data => {
      this.ongoingEvents = data["data"].map(event => new CustomerEvent(event));
      if (!this.selectedEventId && this.selectedEventId != 'completed' && this.ongoingEvents.length >0) {
        this.redirectToEvent(this.ongoingEvents[0]._id);
      }
      if(this.ongoingEvents.length <1){
        this.redirectToEvent('-1');
      }
      this.dataLoaded = true;
    });
  }

  eventCreated(event_id: string) {
    this.router.navigate(["/customer/events/ongoing", event_id]);
    this.newEventWindow = false;

  }

  redirectToEvent(event_id: string) {
    this.router.navigate(["/customer/events/ongoing", event_id]);
  }

ссылка на маршрутизатор после первого щелчка по навигации по маршрутизатору выглядит примерно так

/ заказчик / события / текущие / sda3i4un34j3b42

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

/ заказчик / события /

проблема здесь не в вызове getfunction () и OnInit. Может ли кто-нибудь понять это?

Спасибо


typescript angular rxjs angular-resolver
person Charuka Herath    schedule 10.02.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

вам просто нужно сделать перенаправление функции, которое включит, shouldreusestartergy

reInitComponent(){
this.router.routeReuseStrategy.shouldReuseRoute = () => false;

this.router.navigate(["/customer/events/ongoing", event_id]);

}

вызывайте этот reInitComponent () всякий раз, когда хотите перезагрузить, и вызывайте все хуки жизненного цикла angular

person Amey    schedule 10.02.2020
comment
благодарю вас! Но я использовал такой подход. Но что происходит, когда событие id = -1, компонент повторно запускается в бесконечном цикле. любая идея? - person Charuka Herath; 10.02.2020
comment
просто проверьте в методе ngOnInit идентификатор параметра, если его -1, тогда не вызывайте функцию перезагрузки, иначе вызовите функцию перезагрузки - person Amey; 10.02.2020
comment
да, верно, но согласно моему коду, я не передаю никаких параметров через [routerlink], поэтому никаких параметров не будет. там я использовал стратегию повторного использования в конструкторе. - person Charuka Herath; 10.02.2020
comment
просто передайте необязательный или обязательный параметр в коде routerLink как: / id - person Amey; 10.02.2020
comment
Спасибо! Я исправил это, используя следующий подход. - person Charuka Herath; 11.02.2020

arrow_upward
0
arrow_downward

Мы можем добавить параметр запроса, который изменяется динамически.

this.router.navigate(['/routedComponent'], {
   queryParams: {refresh: new Date().getTime()}
});

Таким образом, мы можем проверить, изменен ли параметр запроса в конструкторе, и передать функцию, которую нам нужно выполнить.

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

person Charuka Herath    schedule 11.02.2020