使用不同的参数导航到相同的路线

Question

我在 typescript 文件中导航

this.router.navigateByUrl(`account-transactions/${code}`);

然而，我的活动路线是

http://localhost:4200/account-transactions/10102

但如果尝试导航到，请说：

http://localhost:4200/account-transactions/99999

url地址改变，但组件没有重新加载

有人知道为什么吗？

Answer 1

试试这个：this.router.navigateByUrl(../account-transactions/${code});

或者如果您使用的是 routerLink

routerLink="../account-transactions/' + code" 或
[routerLink]="['../account-transactions', code]"

Answer 2

我认为您正在使用快照来获取您的价值，因此为了工作，您需要使用 Activated Route 以便您可以订阅以检测路由中的变化您应该更改以下初始化代码：

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
   this.route.params.subscribe(params => {
       this.id = params['id']; //or whatever you put in your routing
       // here your logic to use this id

    });
  }

Answer 3

当 URL 参数更改时，

Angular 不会重新加载组件。您可以改为订阅要重新加载的组件中 ActivatedRoute 接口 (https://angular.io/api/router/ActivatedRoute) 中的 Observables。

在你的组件中

import { ActivatedRoute } from '@angular/router';

...

export class ExampleComponent implements OnInit {
    constructor(
        private activeRoute: ActivatedRoute
    ) { }

    ngOnInit() {
        this.activeRoute.params.subscribe(routeParams => {
            // Do something on URL parameter change
            this.loadAccountTransactions(routeParams.code);
        });
    }
}

使用不同的参数导航到相同的路线

Navigating to the same route with different parameters

angular-routing

angular