Маршрутизация в модуле в Angular

[введите описание изображения здесь][1][Мне лень загружать пользовательский модуль и получать страницу входа в систему по пустому пути в user.routing , но не могу перейти от входа в систему к регистрации через router.navigate Пользователь является подмодулем и (вход, signup, забыл) являются компонентами в пользовательском модуле, он работает, если я импортирую пользовательский модуль в модуль приложения, иначе он не работает с 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)},

 ]

typescript angular routes angular9
person bhuvanesh ch    schedule 15.05.2020    source источник
comment
Ваш модуль с ленивой загрузкой должен иметь собственный файл router-outlet.   -  person julianobrasil    schedule 16.05.2020
comment
Кстати, наличие родительского маршрута с именем login в этом случае звучит немного странно, потому что у вас также будут login/forgot и login/signup. Вам не кажется, что было бы лучше, если бы вы назвали его auth или user (он загружает UserModule)   -  person julianobrasil    schedule 16.05.2020
comment
я просто назвал это для примера, и проблема была решена путем удаления pathMatch: full в ленивом маршруте загрузки, не знаю причины   -  person bhuvanesh ch    schedule 19.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

демонстрация Stackbliz

Если вы лениво загружаете пользовательский модуль, я предлагаю вам использовать компонент маршрутизации:

@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)
  }
])

Теперь у вас есть эти маршруты:

  • авторизоваться
  • войти/забыл
  • войти Зарегистрироваться

Вам не кажется, что было бы лучше иметь:

  • авторизация/логин
  • авторизация/забыл
  • авторизация/регистрация

Или что-то типа того?

person julianobrasil    schedule 15.05.2020
comment
Добавил демонстрацию stackblitz в начале моего ответа. - person julianobrasil; 16.05.2020
comment
Спасибо, проблема была решена путем удаления pathMatch: full в ленивом маршруте загрузки, пожалуйста, сообщите мне причину, если это возможно. - person bhuvanesh ch; 19.05.2020
comment
Потому что у вас есть подмаршруты. Если x — единственный маршрут, вам не нужно использовать pathMatch='full'. Но если у вас есть подмаршруты, такие как x/route1, x/route2, и вы хотите загрузить компонент или перенаправить, когда путь x появляется один, вы должны указать pathMatch='full' для этого маршрута. - person julianobrasil; 19.05.2020