角度路由参数问题

Question

我有几条如下所示的路线。我的主要/基本应用程序路由如下所示：

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 如下： 本地主机：4200/projects/123/serving/1 本地主机：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