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',
    loadChildren: () => import('./module2.module').then(m => m.Module2Module)
  }
];

src / app / app.component.html

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

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

const routes: Routes = [
  {
    path: '',
    component: Module1Component
  },
];

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

src / app / module2 / module2.component.html

<button routerLink="../module2">Go to Module2</button>

我的问题是，从家到模块1我有正确的URL，即http://localhost:4200/module1，但如果我想从模块1到模块2，则它转到http://localhost:4200/module1/module2而不是http://localhost:4200/module2

谢谢

Answer 1

尝试更改routerLink="/module2"。

Answer 2

而不是像../那样上移一级，需要使用/

如果第一段以/开头，则路由器将从您的应用程序的根目录查找路由。您想要的。

<button routerLink="/module2">Go to Module2</button>

如此处https://angular.io/api/router/RouterLink所述

Answer 3

由于有解决您问题的答案，但我仍然会回答以解释正在发生的事情。

您具有以下内容：

<button routerLink="../module2">Go to Module2</button>

请注意../module2语法。 ..表示在开始的相对路径中。它转换为当前目录或路径。例如。您在http://localhost/module1中，如果单击链接，您将导航至不需要的http://localhost/module1/module2，但您想要的http://localhost/module2。

从开头删除两个点，您将得到结果。

<button routerLink="/module2">Go to Module2</button>