Angular 模块中的路由

Question

[在此处输入图片描述][1][我正在延迟加载用户模块并在 user.routing 中的空路径上获取登录页面，但无法通过 router.navigate 从登录导航到注册用户是一个子模块，并且（登录、注册、忘记）是用户模块中的组件，如果我在应用程序模块中导入用户模块，它就会工作，否则不使用 router.navigate 和其他指令]

App Structure:
app
|-(appModule.ts,app.component.ts,app.component.html)
|-user
   |-[UserModule.ts,user-routing.ts]
   |-loginComponent
   |-signupComponent
   |-forgotComponent

UserModule:
const routes: Routes = [     
         { path: '', component: LoginComponent },     
         { path: 'signup', pathMatch:'full',component: SignupComponent },    
         { path: 'forgot', component: ForgotComponent } 
];
@NgModule({
  declarations: [LoginComponent, SignupComponent, ForgotComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ]
})

AppRouting:
export const routes: Routes = [   
{ path: 'login', pathMatch: 'full' ,loadChildren: () => import('./user/user.module').then(m => m.UserModule)},

 ]

Answer 1

Stackbliz demo

如果你懒加载用户模块，我建议你有一个路由组件：

@Component({
  selector: `user-routing-component`,
  template: `<router-outlet></router-outlet>`
})
export class UserRoutingComponent {}

那么，你可以这样做：

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: UserRoutingComponent,
        children: [
          {
            path: '',
            component: LoginComponent,
            pathMatch: 'full'
          },
          {
            path: 'signup',
            component: SignupComponent
          },
          {
            path: 'forgot',
            component: ForgotComponent
          }
        ]
      }
    ])
  ], // imports,
  declarations: [
    UserRoutingComponent, 
    LoginComponent,
    SignupComponent,
    ForgotComponent
  ],
  exports: [RouterModule]
})
export class UserModule {}

父路由是这样的：

RouterModule.forRoot([
  {
    path: 'login',
    loadChildren: () => import('PATH/TO/USER/MODULE/user.module')
        .then(m => m.UserModule)
  }
])

Angular 模块中的路由

Routing with in the Module in Angular

routes

typescript

angular

angular9