Angular 1.x 组件,ui 路由器 1 状态更改

Angular 1.x components, ui router 1 state change

我有 3 个组件

  1. 应用组件
  2. 登录组件
  3. 仪表板组件

应用组件

应用程序组件是组件树的主要组件。该组件还包含由 header 和内容包装器组成的基本布局。

<div class="container-fluid">
  <navigation routes="$ctrl.routes"></navigation>
</div>

<ui-view></ui-view>

登录组件

登录组件是一个呈现登录表单并发挥其神奇作用的组件。

仪表板组件

仪表板组件呈现用户数据。

{
    name: 'app',
    url: '',
    abstract: true,
    component: 'appComponent',
    resolve: {
        routes: () => Routes
    }
},
{
    name: 'app.login',
    url: '/',
    label: 'Login',
    data: {
        navigations: ['navbar-no-user']
    },
    component: 'loginComponent',
    resolve: {
        redirectUrl: () => 'app.dashboard'
    }
},
{
    name: 'app.dashboard',
    url: '/',
    label: 'Dashboard',
    data: {
        navigations: ['navbar']
    },
    component: 'dashboardComponent'
}

场景

访客正在加载应用程序,导航栏应该只显示 navbar-no-user 项,例如登录。访问者登录并成为用户,现在应该会看到一个导航栏,其中只有导航栏项目,例如仪表板。

问题

我正在为这种情况寻找解决方案,通常会有一个 onStateChange 事件,我可以在控制器中使用它。我现在看到的唯一可用选项是在每个特定组件中呈现导航。

我通常会引入一个intermediate/parent状态来做到这一点。

例如,我将定义以下状态:

  • app (摘要)
  • app.login
  • app.main (摘要)
  • app.main.dashboard
  • app.main.home
  • 等等

例如,如果我只想为登录用户显示导航,我的路线模板将如下所示:

app 路线模板

<ui-view></ui-view>

app.main 路线模板

<div class="container-fluid">
    <navigation routes="$ctrl.routes"></navigation>
</div>
<ui-view></ui-view>