Angular 路由参数问题

Question

我有如下几条路线。我的 main/base 应用程序路由如下所示：

const routes: Routes = [{
    path: 'projects',
    loadChildren: () => import('../app/pages/pages.module').then(m => m.PagesModule)
}]

PagesModule 的路由如下所示：

const routes: Routes = [
    {
        path: ':projectId/model', component: ModelComponent
    },
    {
        path: ':projectId/compare/:id', component: CompareComponent
    }
    {
        path: ':projectId/serving/:id', component: ServingComponent
    }
]

对于模型组件，url 是正确的，即：localhost:4200/projects/123/model

将 123 作为 :projectId，将 1 作为 :id，我希望 ServingComponent 和 CompareComponent 的 URL 如下所示： localhost:4200/projects/123/serving/1 localhost:4200/projects/123/compare/1

什么有效：通过 HTML 的导航方式如下：

 <button [routerLink]="['../compare', model.id]">Compare</button>

问题：当我从我的 TS 文件导航时，它不起作用。试过以下：

 this.router.navigate(['../compare', model.id]);

你能告诉我哪里出了问题吗？我需要修改路线吗？我想知道为什么 TS 导航不工作，而导航从 HTML 开始工作。请指教

Answer 1

如果你想使用相对路径，你需要像这样添加relativeTo属性： this.router.navigate(['../compare'], {relativeTo: this.activatedRoute}); （还添加 model.id 参数）

更多详情：https://angular.io/guide/router#specifying-a-relative-route

Angular 路由参数问题

Angular Route Params issue

angular

angular8

angular-components

angular-router