Angular - 获取当前激活的路由并使用不同的路由参数重新导航到同一页面

Question

在标题的搜索文本框中更改 itemCode 后，我试图获取当前路线并导航到同一路线。当我最初来到页面时，父路由是“iauth/iauthedit/1706”，然后用户导航到子路由“/info”，用户可以从侧面导航栏导航其他几条路由，下图中未显示.如图所示，当我将应用程序 header 中的项目代码更改为 1853 时，URL 应更改为“iauth/iauthedit/1853/info”，如何根据当前路由 URL 动态更改浏览器 URL 路由参数浏览器？，我试图从浏览器 URL 中找到当前激活的路由，在当前场景中父级“iauth/iauthedit/”，以便我可以进行导航

this.router.navigate(['iauth/iauthedit/', 1853];

以下是目前的路线:

const itemAuthRoutes: Routes = [
    {
        path: 'iauthedit/:itemCode',
        children: [
            {
                path: '',
                canActivate: [AuthGuard],
                //data: { feature: AppFeature.AuthorizedItem },
                component: ItemAuthorizationEditComponent,
                children: [
                    {
                        path: 'info', component: ItemAuthorizationInfoEditComponent
                    }]
            }]
    }]

Answer 1

Angular 提供的 ActivatedRoute 的问题在于它的值取决于注入(inject)它的组件。事实上，当您在组件中注入(inject) ActivatedRoute 时，该值将不是完整的路由，而是显示该组件的路由部分。

这意味着如果您想在包含“项目代码”输入的组件中检索完整的 URL，您根本无法使用 Angular API 来完成。因此，我建议您使用 native Javascript API 解析 URL，然后使用 this.router.navigate 触发导航。

Angular 在这一点上有点聪明，它不会重新加载组件，您将能够通过使用 this.activatedRoute.params.subscribe(...) 对参数更改使用react>，然后加载新数据并通过 @Input() 属性将其传递给子级。