Angular

Question

我正在使用 angular 9 并且我正在使用延迟加载功能模块。我无法从一个组件导航到同级组件。我有以下结构：

src/app/app-routing.module.ts

const routes: Routes = [
  {
    path: 'module1',
    loadChildren: () => import('./module1.module').then(m => m.Module1Module)
  },
  {
    path: 'module2/:id',
    loadChildren: () => import('./module2.module').then(m => m.Module2Module)
  }
];

src/app/app.component.html

<button routerLink="/module1">Go to Module1</button>
<button routerLink="/module2/MyId">Go to Module1</button>
<router-outlet></router-outlet>

src/app/module2/module2-routing.module.ts |类似rc/app/module1/module1-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: Module2Component,
    children: [{
    path: '',
    redirectTo: 'child1',
    pathMatch: 'full'
  },
  {
    path: 'child1',
    loadChildren: () => import('./child1.module').then(m => m.Child1Module)
  },
  {
    path: 'child2',
    loadChildren: () => import('./child2.module').then(m => m.Child2Module)
  }
  ]
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Module1RoutingModule { }

src/app/module2/child1/child1.component.html

<button routerLink="../child2">Go to Module2/MyId/child2</button>

我的问题是从 home 到 module1 我有正确的 url，即 http://localhost:4200/module1 but if I would like to module2/MyID/child2 from module2/MyID/child1 then it goes to http://localhost:4200/module2/MyID/child1/child2 instead of http://localhost:4200/module2/MyID/child2

谢谢

Answer 1

尝试改变routerLink="/module2"。

Answer 2

以防万一有人遇到同样的问题，我找到的解决方案是使用绝对路径并从 activatedRoute 获取路径参数：ActivatedRoute。所以我有：

src/app/module2/child1/child1.module.ts

baseUrl = '/module2/{id}';
constructor(private activatedRoute: ActivatedRoute)
ngOnInit() {
    this.baseUrl = this.baseUrl.replace('{id}', this.activatedRoute.snapshot.params.id);
}

src/app/module2/child1/child1.component.html

<button routerLink="{{baseUrl}}/child2">Go to Module2/MyId/child2</button>

Angular - 从一个同级导航到另一个带有路径参数的父组件的延迟加载组件时出现问题

Angular - Issue on navigating from one sibling to another lazy loaded component with a parent with path parameters

lazy-loading