Angular 和 ui 路由器 - 如何定义路由

Question

我正在创建一个使用 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，但仍以这种方式获取它..

由于这不起作用，我显然做错了什么。谁能告诉我我做错了什么以及我应该如何解决它？

Answer 1

您的架构可能需要更多思考。看看this blog post 中的方法，它使用原生 Angular 路由器来实现您想要做的事情。