url 更改但 angular 不导航

Question

我有 2 个 link 如下所示。当我第一次点击任何一个时，它会导航到它，但是当我之后点击第二个 link 时，url 会改变但它不会导航到它。

<li><a routerLink="/order/buyer" >Buyer</a></li>
<li><a routerLink="/order/seller">Seller</a></li>

这些是我的路线配置：

app.routing.module.ts

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        component: RootComponent,
    },
    {
        path: '',
        children: [
            {
                path: 'order',
                loadChildren: './order/order.module#OrderModule',
            }
        ]
    }

order.module.ts

export const ROUTES: Routes = [
    {
        path: ':orderParty/:id',
        component: OrderDetailComponent,
        canDeactivate: [OrderDetailGuardService]
    },
    {
        path: ':orderParty',
        component: OrderListComponent
    }
];

尝试了几件事，但没有奏效。我注意到在第二次点击时，'OrderListComponent' 的 ngOnInit() 没有被调用。

Answer 1

您有几个选项可以解决 Angular 中的这个常见问题，最常见的是使用此 GitHub 线程中的解决方案： https://github.com/angular/angular/issues/13831#issuecomment-319634921

constructor(private router: Router){
     // override the route reuse strategy
     this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
     }

     this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
           // trick the Router into believing it's last link wasn't previously loaded
           this.router.navigated = false;
           // if you need to scroll back to top, here is the right place
           window.scrollTo(0, 0);
        }
    });

}

另一种解决方案是订阅您的路由器参数并根据本文建议的新参数处理更改：

this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });

https://medium.com/@mvivek3112/reloading-components-when-change-in-route-params-angular-deed6107c6bb

Answer 2

是的，因为路由是相同的，它正在变化的动态参数。要读取更改的参数，您可以在构造中注入路由器并读取参数，如

this.router.params.subscribe((参数)=>{console.log(参数)});

路由指向同一组件，因此不会重新初始化。

url 更改但 angular 不导航

url changes but angular does not navigate

javascript

angular

angular-ui-router

single-page-application