角1.x的组件，UI路由器1层的状态变化

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

应用组件

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

<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事件，我可以用这一个控制器内。我现在看到的唯一选项是呈现每个组件中特定的导航。

来源

2017-06-13 Sedenko

我通常会为仪表板添加一个父状态（登录后所有状态）。你可以轻松地添加一个抽象的父状态“仪表板”，其主视图就像你为“应用程序”状态所做的那样。 –

@ daan.desmedt这可能是一个正确的选项。你知道其他可能的策略吗？ – Sedenko

您可以使用'rootscope'变量来指示何时显示视图部分......但我认为'状态'视图对您的'摘要循环来说更逻辑且密度更低。 –

我通常会介绍一个中间/父母状态来做到这一点。

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

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>

来源

2017-06-13 08:23:33

Upvoted您的答案，正如我上面的评论中所说 - 这也是我的首选解决方案。 –

角1.x的组件，UI路由器1层的状态变化

回答

相关问题