Angular 路由参数问题

Angular Route Params issue

我有如下几条路线。我的 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 开始工作。请指教

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

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