Angular 5 功能模块中的路由问题（当路径相同但参数更改时强制路由器重新加载路由）

Question

我有一个惰性加载模块（文档）和路由文件如下，

文档-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: DocumentationComponent,
        children: [
            {
                path: '',
                pathMatch: 'full',
                redirectTo: 'getting-started'
            },
            {
                path: 'getting-started',
                component: GettingStartedComponent
            },
            {
                path: 'products/:productname/:productVersion',
                component: ProductDocumentComponent
            }
    ]
    }
];

我像这样从另一个模块调用路由，

this.router.navigate([`documentation/products/${this.productRouteName}/${productVersion.version}`]);

它工作正常并且 URL 变成，

http://localhost/documentation/products/myProductName/2.1.0

现在我面临的问题是，如果我想从文档模块的组件内导航到相同的路径（通过更改版本号），例如，

documentation.component.ts

 ProductDocumentationForAnotherVersion(e:any, version:string){
          this.router.navigate([`../products/${routeName}/${version}`]);
    }

URL变成

http://localhost/products/myProductName/3.1.0

这是无效的。因为所有 URL 都应该基于

http://localhost/documentation/。，当我从文档模块中调用（对于任何子路由）

看来我没有在这里做。有什么建议吗？

以下是 stackBlitz， https://stackblitz.com/edit/angular-u7olmx

--------更新----------

我最后打电话给了

documentation.component.ts

 ProductDocumentationForAnotherVersion(e:any, version:string){
          this.router.navigate([`documentation/products/${routeName}/${version}`]);
    }

并在路由相同但参数值发生变化时使用以下方式重新加载页面，

route.params.subscribe(param => {
            this.selectedVersion = param['clickedVersion'];
            if (this.selectedVersion) {
                this.getDocumentation(this.selectedVersion); 
            }
        });

Answer 1

如果只是换版本，可以使用相对路径:

this.router.navigate([`../${version}`], {relativeTo: this.activatedRoute});

或绝对路径 :

this.router.navigate([`documentation/products/${routeName}/${version}`]);

I would prefer the relative path for the same component route, and only use absolute when it is completely diff path.

onSameUrlNavigation: 'reload' | 'ignore'

How to handle a navigation request to the current URL. One of:

'ignore' : The router ignores the request. 'reload' : The router reloads the URL. Use to implement a "refresh" feature.

RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
})

Answer 2

尝试添加documentation:

this.router.navigate([`documentation/products/${routeName}/${version}`]);

Angular 5 功能模块中的路由问题（当路径相同但参数更改时强制路由器重新加载路由）

Angular 5 routing issue in a feature module (force router to reload route when path is same but param changes)

angular-routing

angular