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

Question

我无法导航到具有 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>

应用-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。

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

P.S。 -

Stackblitz Link
请不要建议对不同的ID使用不同的组件，这只是我复杂问题的一个更简单的原型

谢谢:)

Answer 1

您的路由器工作正常。您应该订阅路由参数的更改。
更新 ngOnInit 如下


  ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      this.id = params.id;
      console.log(params.id);
    });
  }

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

Dynamic Routing with IDs not rendering Recent Angular Component

routes

url-routing

angular-routing

angular

angular10