在路由模块angular中重用路由

Question

我有一条路线：

{ path: 'route/:id', component: SomeComponent }

现在，在我的头文件中，我创建了两个不同的routerLink：

<a routerLink="/route/0">route1</a>
<a routerLink="/route/1">route2</a>
<a routerLink="/route/2">route3</a>

在SomeComponent中，我像这样实现了ngOnInit：

ngOnInit(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    if (id === 0) {
      this.title = "title0"
    } else if (id === 1) {
      this.title = "title1"
    }else if (id === 2) {
      this.title = "title2"
    }
  }

我从参数映射中捕获id，并为每个id设置不同的title。在我的.html中，当我点击routerLink时，我想显示不同的标题({{title}})，但一旦标题设置正确，当我点击它时，标题就会一直保持不变，直到我手动刷新页面。

我尝试向ngOnInit()添加window.location.reload()，但这当然会重复刷新页面。

我如何才能做到这一点？谢谢!

Answer 1

尝试使用observable获取路由参数。

   ngOnInit(){
        this.route.paramMap.subscribe(params => {
            const id = +params.get('id');
            if (id === 0) {
              this.title = "title0"
            } else if (id === 1) {
              this.title = "title1"
            }else if (id === 2) {
              this.title = "title2"
            }
          });
    }