如何路由到另一个模块组件

Question

我有两个模块：

app.module.ts

和

auth.module.ts

。

auth.module.ts

有两个组成部分：

login.components.ts

和

registration.component.ts

。

我希望

login.components.ts

处理路线

www.mywebsite.com/login

，而

registration.component.ts

处理路线

www.mywebsite.com/registration

。

如果我使用延迟加载路由

app-routing.module.ts

  {
    path: 'login',
    loadChildren: () => import('../auth/auth.module').then((m) => m.AuthModule),
  },

auth-routing.module.ts

    {
        path: 'login',
        component: LoginComponent
    },

然后路径就变成了

www.mywebsite.com/login/login

。

如何使

www.mywebsite.com/login

由

login.component.ts

中的

auth.module.ts

处理，以及

www.mywebsite.com/registration

由

registration.component.ts

中的

auth.module.ts

处理？

StackBlits 项目

旁注：

我还尝试直接在

LoginComopnent

 中使用 

auth.module.ts

 中的 

app-routing.module.ts

app-routing.module.ts

import { LoginComponent } from '../auth/login/login.component';
const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
];

但这导致了

Can't bind to 'formGroup' since it isn't a known property of 'form'.

错误，甚至很难，我在

FormsModule

和

ReactiveFormsModule

模块中都导入了

app.module.ts

和

auth.moduel.ts

。

Answer 1

如果你没有模块，就这个。如果您有父路线，则不会使子路线具有相同的名称

 {
  path: 'login',
  children: [
     {
      path: 'login',
      component: LoginComponent,
    },
  ]
}

当然，这会导致

/login/login

路线。相反，你会留下一个未命名的，就像这样：

 {
  path: 'login',
  children: [
     {
      path: '',
      component: LoginComponent,
    },
  ]
}

结果是

/login

。

因此，对于您的情况，对于嵌套模块，我认为您必须为其命名。我推荐

auth

，像这样

{
    path: 'auth',
    loadChildren: () => import('../auth/auth.module').then((m) => m.AuthModule),
  },

然后您就有

auth/login

和

auth/registration

路线

参见 StackBlitz