Angular & uirouter - как определить маршруты - PullRequest
Новая
       23

Angular & uirouter - как определить маршруты

0 голосов
/ 29 июня 2018

Я создаю приложение, которое использует Angular 6 (6.0.6) и @ uirouter / angular (2.0.0). Но мое приложение не восстанавливает маршрут «/login», оно только перемещается к «/» (даже если я удаляю «otherwise: '/'»)

Это приложение состоит из нескольких модулей с несколькими страницами. Структура может быть описана следующим образом: 

app/
-- home/
---- home.module.ts
---- home.component.ts
---- home.route.ts
---- home.scss
---- home.html
-- login/
---- login.module.ts
---- login.component.ts
---- login.route.ts
---- login.scss
---- login.html
-- app.module.ts
-- app.component.ts

Оба модуля имеют отдельный файл маршрутизации. Я думал, что это будет работать следующим образом (упрощенный пример, не обращайте внимания на отсутствующие части):

app.module.ts 

@NgModule({
  declarations: [AppComponent],
  imports: [
    UIRouterModule.forRoot({otherwise: '/'}),
    HomeModule,
    LoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

home.module.ts 

@NgModule({
  imports: [
    UIRouterModule.forChild({states: [homeState]}),
    NavbarModule
  ],
  declarations: [HomeComponent],
  providers: []
})
export class HomeModule {
}

home.route.ts 

export const homeState: Ng2StateDeclaration = {
  name: 'home',
  url: '/',
  component: HomeComponent
};

login.module.ts 

@NgModule({
  imports: [
    UIRouterModule.forChild({states: [loginState]}),
  ],
  declarations: [LoginComponent],
  providers: []
})
export class LoginModule {
}

login.route.ts 

export const loginState: Ng2StateDeclaration = {
  name: 'login',
  url: '/login',
  component: LoginComponent
};

Я ожидал, что метод UIRouterModule.forChild() просто добавит маршрут в конфигурацию. Но маршрут /login не пересмотрен, и он просто возвращается к /. Я не хочу создать подмодуль, в котором происходит вся моя маршрутизация, потому что тогда мне также придется импортировать все зависимости, которые мои компоненты имеют в этом модуле (пока разделение задач и модульность).

Для моего примера приложения это будет выглядеть следующим образом: 

const states = [homeState, loginState];

@NgModule({
  imports: [
    UIRouterModule.forChild({states: [states], otherwise: '/'}),
    NavbarModule
  ],
  declarations: [HomeComponent, loginComponent],
  providers: []
})
export class AppRoutingModule {
}

loginComponent не нуждается в NavBarModule, но все равно получает его таким образом ..

Поскольку это не работает, я явно делаю что-то не так. Может кто-нибудь сказать мне, что я делаю неправильно и как мне это исправить?

1 Ответ

0 голосов
/ 03 июля 2018

Возможно, вашей архитектуре нужно немного подумать. Взгляните на подход в этом блоге , в котором для достижения того, что вы пытаетесь сделать, используется собственный Angular-маршрутизатор.

...