Question

我有3个组件

应用程序组件
登录组件
仪表板组件

应用组件

app组件是组件树的主要组件。该组件还包含基本布局，其中包含标题和内容包装。

<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'
}

方案

访客正在加载应用，只有导航栏没有用户项目（例如登录）才能看到导航栏。访问者登录并成为用户，现在应该看到一个只包含仪表板等导航栏的导航栏。

问题

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

Answer 1

我通常会引入一个中间/父状态来执行此操作。

例如，我将定义以下状态：

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>

Angular 1.x组件，ui路由器1状态改变

1 个答案: