第一次单击后，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 不会一次又一次地被调用。 在subscribe里面调用getDetail函数，设置this.id作为对activateRoute的订阅后，每次导航成功后仍会调用。

      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>

这样，您的链接也会在项目对象更改时更新。 还可以在 params 订阅中调用您的getDetails()方法，如下所示，以便在模板中更新您的项目详细信息。

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

我创建了一个演示 Stackblitz 应用程序来展示 routerLink 数据绑定方法。 单击预览屏幕中的Item page链接以查看演示。