RouterLink не обновляет целевой компонент после первого клика

Question

Angular7, routerlink для создания списка элементов, по которым можно кликать для навигации по соответствующей странице сведений. Он работает при первом клике, как и ожидалось, но все последующие клики не обновят детали, даже их значения id уникальны, страница детали не обновляется. Fiddler не показывает активности после первого щелчка.

Маршрутизатор в компоненте:

<tr *ngFor="let item of Items">
            <td><a routerLink="/itemdetail/{{item.id}}">{{item.id}}</a></td>

app-routing.module.ts

const routes: Routes = 
                [
                  ...
                  { path: 'itemdetail/:id', component: itemdetail}
                ];

itemdetail.ts

  id: string;
  ngOnInit(): void 
  {
      this.route.paramMap.subscribe((params: ParamMap)=>
      {
          this.id = params.get('id');
      })
    this.getDetail();  
  }


getDetail(): void
  {
      this.mySvc.getDetail(this.id)
            .subscribe(data => this.items = data);
  }

Answer 1

ngOninit не вызывается снова и снова из-за повторного использования компонента. Вызовите функцию getDetail внутри подписки, после установки this.id, поскольку подписка на activRoute будет по-прежнему вызываться после каждой успешной навигации.

      id: string;
      ngOnInit(): void 
      {
          this.route.paramMap.subscribe((params: ParamMap)=>
          {
              this.id = params.get('id');
              this.getDetail();  
          })

      }


    getDetail(): void
      {
          this.mySvc.getDetail(this.id)
                .subscribe(data => this.items = data);
      }

Answer 2

В вашем компоненте вы не использовали одностороннюю привязку данных в директиве routerLink для обновления ссылок на лету. Просто добавьте квадратные скобки вокруг директивы routerLink для ссылок для обновления.

<tr *ngFor="let item of Items">
  <td><a [routerLink]="'/itemdetail/' + item.id">{{item.id}}</a></td>
  <!-- other elements -->
</tr>

Таким образом, ваша ссылка также обновляется при изменении объекта элемента. Также вызовите ваш метод getDetails() внутри подписки params, как показано ниже, чтобы данные вашего элемента были обновлены в шаблоне.

  id: string;
  ngOnInit(): void 
  {
      this.route.paramMap.subscribe((params: ParamMap)=>
      {
          this.id = params.get('id');
          this.getDetail();
      });  
  }

Я создал демонстрационное приложение Stackblitz , чтобы показать подход привязки данных routerLink. Нажмите на ссылку Item page на экране предварительного просмотра, чтобы просмотреть демонстрацию.