Rouer Steckdose * ngIF

Question

Ich habe folgende App Struktur:

master.html - meine app Komponente HTML-Template-Struktur:

<header> 
<sidebar-right> 
<sidebar-left> 

<router-outlet> 

<footer> 

Jetzt .. Ich habe 2 Szenarien:

1. Die Gäste
2. angemeldeten Benutzer

Wenn der Benutzer ein Gast ist, muss ich die <intro></intro> Komponente ohne die Seitenleisten anzeigen, und wenn der Benutzer ein angemeldetes Mitglied ist, zeigen Sie den Router Outlet mit all diesen Tags (Seitenleisten, Header, etc ..)

Wie kann ich das machen? Da ich die router outlet innerhalb *ngIf nicht verwenden kann, habe ich keine Ahnung, wie es funktioniert, wie oben beschrieben.

Irgendwelche Ideen?

gewünschte Ausgangsidee:

<section *ngIf="loggedIn"> 
<header> 
    <sidebar-right> 
    <sidebar-left> 

    <router-outlet> 

    <footer> 
</section> 
<section *ngIf="!loggedIn"> 
<intro></intro> 
</section> 

Answer 1

Setzen Sie den Gast und die Benutzeransicht in zwei verschiedenen Routen und dann eine Strecke Wache hinzufügen,, die als Bedingung für eine Strecke zu sein sichtbar dienen werden. Das macht, was der * ngIf hätte, wenn es am Router-outlet-Tag funktioniert hätte.

Verschieben Sie die Inhalte, die der angemeldete Benutzer sehen soll, aus der HTML-Vorlage der App-Komponente und in eine eigene Komponente. Machen Sie dasselbe für die Inhalte für den Gastbenutzer.

beiden Komponenten als Routen in der Route Konfiguration hinzufügen und die ‚canActivate‘ Wert der Komponente für angemeldeten Benutzer zu einem importierten ‚Authentifizierung Wachdienst‘ gesetzt (das Sie erstellen):

import { AuthGuardService } from '../auth-guard.service'; 

const routes: Routes = [ 
    { path: 'guest', 
    component: guestComponent 
    }, 
    { path: 'logged-in-user', 
    component: loggedInUserComponent, 
    canActivate: [AuthGuardService] 
    } 
]; 

erstellen Sie den Schutzdienst:

import { Injectable }  from '@angular/core'; 
import { CanActivate } from '@angular/router'; 

@Injectable() 
export class AuthGuardService implements CanActivate { 
    loggedIn: boolean; 

    canActivate() { 
    return this.loggedIn; 
    } 
} 

die loggedInUser Komponente nur an und betrachtet werden navigiert kann, wenn der loggedIn Wert gilt.

Sie können diese und mehr die Dokumentation auf der angular.io Website finden: https://angular.io/docs/ts/latest/guide/router.html#!#guards