Angular＆uirouter - 如何定义路线

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

您的架构可能需要更多思考。 看看这篇博客文章中使用原生Angular路由器实现您想要做的事情的方法。