Question

我在打字稿文件中使用

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

但是，我的有效路线是

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

但如果尝试导航至，则说：

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

URL地址已更改，但未重新加载组件

有人知道为什么吗？

Answer 1

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

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 2

尝试以下操作：this.router.navigateByUrl( ../ account-transactions / $ {code} );

，或者如果您使用的是routerLink

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

Answer 3

URL参数更改时，Angular不会重新加载组件。您可以改为订阅要重新加载的组件的ActivatedRoute界面（https://angular.io/api/router/ActivatedRoute）中的Observable。

在您的组件中

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

导航到具有不同参数的相同路线

3 个答案: