时间戳

首页 > 解决方案 > RouterLink在第一次点击后不更新目标组件

angular - RouterLink在第一次点击后不更新目标组件

问题描述

Angular7，routerlink创建可点击的项目列表以导航相应的详细信息页面。它在第一次单击时按预期工作，但所有后续单击都不会更新详细信息，即使它们的id值是唯一的，详细信息页面也不会更新。Fiddler 在第一次点击后没有显示任何活动。

组件中的Routerlink：

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

应用程序路由.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);
  }

标签： angular

解决方案

由于组件被重用，不会一次又一次地调用 ngOninit。在订阅中调用getDetail函数，设置this.id为订阅激活路由后，每次导航成功后仍会调用。


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

推荐阅读