带有 ID 的动态路由不呈现最近的 Angular 组件

问题描述

我无法使用 ID 导航到不同的动态项目。解释一下：

app.component.html

<mat-sidenav-container>
    <mat-sidenav  mode="side" opened="true">
      <mat-nav-list>
         <a mat-list-item routerLink="home" >Home</a>
         <a mat-list-item routerLink="item/1" >Item 1 </a>
         <a mat-list-item routerLink="item/2" >Item 2 </a>
         <a mat-list-item routerLink="item/3" >Item 3 </a>
      </mat-nav-list>
    </mat-sidenav>
    <div class="container">
      <router-outlet></router-outlet>
    </div>
    </mat-sidenav-container>

app-routing.module.ts

export const routes = [
  { path: "home",component: HomeComponent },{ path: "item/:id",component: AccountsComponent }
];

帐户组件

export class AccountsComponent  {
 constructor(private activatedRoute: ActivatedRoute,private router:Router) {}
 public id: string;
 ngOnInit() {
 this.id = this.activatedRoute.snapshot.paramMap.get('id');
 console.log("ID",this.id,"Route",this.router.url); 
   }
}

为了检查当前的动态 id，我在 AccountsComponent 的控制台中打印了 url 参数，如上所述。现在，如果我在路线 'localhost:4200/home' 上并单击 Item1，我将被路由到 'localhost:4200/item/1' 并且 AccountsComponent 在我的 sidenav 中加载，这是预期的！在我的控制台中，还打印了 ID 1 Route /item/1。现在如果我点击 Item2，上面显示的路线是 'localhost:4200/item/2' 但我的 sidenavcontent，即 AccountsComponent 不刷新！！此外，我的控制台没有显示更新，即未打印 ID2。

我注意到，由于动态 url 确实指向同一个组件，因此路由器模块不会再次加载该组件。当我从 Home->Item1->Home->Item2 等移动时，它发生得很好，因为路由 home 有一个不同的组件要加载。请参阅下面的 stackblitz 链接。

附言-

1. Stackblitz 链接
2. 请不要建议为不同的 ID 使用不同的组件，这只是针对我的复杂问题的一个更简单的原型

谢谢:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）