Angular 1.x 组件,ui 路由器 1 状态更改
Angular 1.x components, ui router 1 state change
我有 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>
我有 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>