Angular 1.x Komponenten, ui Router 1 Zustandsänderung

Question

Ich habe 3 Komponenten

1. App Component
2. Anmeldung Komponente
3. Dashboard-Komponente

App Component

Die App-Komponente ist die Hauptkomponente für den Komponentenbaum. Diese Komponente enthält auch das grundlegende Layout, das aus einem Header und einem Wrapper für den Inhalt besteht.

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

<ui-view></ui-view> 

Anmeldung Component

Die Login-Komponente ist eine Komponente, die das Anmeldeformular macht und tut es Magie.

Armaturenbrett Component

Das Armaturenbrett Komponente rendert Datenbenutzer.

Staaten

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

Szenario

Besucher ist die App geladen, ein navbar sollte mit nur navbar-no-Benutzer Produkte wie Login sichtbar sein. Der Besucher meldet sich an und wird zum Benutzer. Nun sollte eine Navigationsleiste mit nur Navigationselementen wie dem Dashboard angezeigt werden.

Frage

ich für dieses Szenario für eine Lösung suchen, in der Regel gab es ein OnStateChange Ereignis und ich konnte dies in einem Controller. Die einzige Option, die ich jetzt sehen kann, ist, die Navigation in jeder Komponente spezifisch darzustellen.

Answer 1

Normalerweise führe ich dazu einen Zwischen-/Elternstatus ein.

Zum Beispiel würde ich die folgenden Zustände definieren:

• app(abstrakt)
• app.login
• app.main(abstrakt)
• app.main.dashboard
• app.main.home
• und so weiter

Wenn ich eine Navigation nur angezeigt werden für angemeldete wollte Benutzer zum Beispiel meine Route Vorlagen würde wie folgt aussehen:

app Route Vorlage

<ui-view></ui-view> 

app.main Routenvorlage

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