角度1.xのコンポーネント、UIルータ1の状態変化

Question

私は3つのコンポーネント

1. アプリケーションコンポーネント
2. ログインコンポーネント
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' 
} 

シナリオ

ビジターアプリをロードされ、ナビゲーションバーには、ログインのような唯一のナビゲーションバー-NO-ユーザー項目と表示されるはずです。ビジターがログインしてユーザーになり、ダッシュボードのようなnavbarアイテムのみのnavbarが表示されるはずです。

私はこのシナリオのためのソリューションを探しています

質問は、通常に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>