2016-12-12 3 views
0

Ich bin neu mit Angular 2. Meine App verwenden 2 Vorlagen, eine für Gäste und eine andere für authentifizierte Benutzer. , das zu tun, habe ich dies in der app.component.htmlAngular 2 - Override Route mit eckigen Route 3.3.0

<router-outlet name="header"></router-outlet> 
<router-outlet name="left"></router-outlet> 
<router-outlet></router-outlet> 
<router-outlet name="footer"></router-outlet> 

In meinem app.routes.ts Datei ich Stellen wie die für authentifizierte Benutzer definiert:

export const routes: Routes = [ 
    { path: '', component: LoginComponent }, 
    { path: '' , component: HeaderComponent, outlet: 'header' }, 
    { path: '' , component: LeftComponent, outlet: 'left' }, 
    { path: '' , component: FooterComponent, outlet: 'footer' }, 
    ... 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 

Aber für Gastbenutzer, in meinem LoginComponent möchte ich Steckdosenkomponenten durch EmptyComponent so ersetzen:

{ path: '' , component: EmptyComponent, outlet: 'left' } 

Routen werden in app.module.ts geladen:

import { routing } from './app.routes'; 

@NgModule({ 
    imports: [ 
    ... 
    routing 
    ], 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    LeftComponent, 
    FooterComponent, 
    LoginComponent 
    ], 
    providers: [ 
    ... 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

Aber ich weiß nicht, wie das zu tun. Ich habe versucht, mit @Routes Richtlinie aber ich benutze Winkel-route-3.3.0 und diese Richtlinie entfernt ...

Antwort

1

können Sie resetConfig nachdem Sie wie unten angemeldet,

initiallly,

{ path: '' , component: EmptyComponent, outlet: 'footer' } 

Nach eingeloggte,

this.router.resetConfig([ 
     { path: '', component: MainComponent }, 
     ... 
     { path: '' , component: FooterComponent, outlet: 'footer' } 
     ... 
    ]); 

hoffe, das hilft !!

+0

Vielen Dank für Ihre Antwort. Ich importiere alle URLs in app.routes, dann erstelle ich eine 'user.component', die neue Routen definiert und' this.router.resetConfig' aufruft, dann angemeldete Komponenten extends 'user.component', aber' resetConfig' hat keine Wirkung (und keine Fehler in der Konsole) – Maxime

+0

Ich nehme an, Sie gehen zuerst zu einem Login-Pfad und ändern dann das routconfig, wenn sie erfolgreich authentifiziert wurden und dann zurück navigieren? –

+0

Oh, jetzt rufe ich 'resetConfig' nach der Anmeldung auf, bevor ich den Benutzer umleite. Aber jetzt habe ich diesen Fehler: 'Unhandled Promise Ablehnung: Template Parse Fehler: 'Router-Steckdose' ist kein bekanntes Element: 1. Wenn 'Router-Steckdose' eine eckige Komponente ist, dann stellen Sie sicher, dass es ein Teil davon ist Modul. 2. Wenn 'router-outlet' eine Web-Komponente ist, dann fügen Sie "CUSTOM_ELEMENTS_SCHEMA" den '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken. ("[FEHLER ->] Maxime

0

Ok, ich behebe mein Problem. Danke @Madhu für Ihre Hilfe.

1 - importieren I Standard-Routen (für Gäste) in meinem app.routes

2 - Wenn angemeldeten Benutzer in I-Updates Routen dank Madhu Ranjan Antwort

3 - Dann füge ich die Liste der verwendeten Komponenten an Punkt 2 in app.module.ts mit Schlüssel entryComponents