Angular 2 Mehrere Layout-Routing

Question

Auf meiner eckigen 2 App habe ich ein komplett anderes Layout zwischen meiner Homepage und dem Rest der App . Der Rest der App hat nur ein Nav gemeinsam.

Meine URL wie folgt aussieht:

http://localhost:4200/ < == dies meine Homepage ist

http://localhost:4200/cgu < == eine Seite mit nav gemeinsam

http://localhost:4200/abc < == eine Seite mit nav gemeinsam

Kann mir jemand den besten Weg erklären, dies zu tun?

Ich habe versucht, diese Lösung zu reproduzieren:

How to switch layouts in Angular2

Aber es funktioniert nicht, oder ich Fehler gemacht, es zu meinem Fall anzupassen.

EDIT:

Schließlich habe ich versucht, Ihre Lösung Also habe ich die navigation.service.ts

@Injectable() 
export class NavigationService { 
    isHomePage: boolean; 
} 

In meinem home.component.ts

@Component({ 
    styleUrls: ['home.css'], 
    templateUrl: './home.component.html', 
}) 
export class HomeComponent { 

    constructor(private navigationService: NavigationService) { 
    navigationService.isHomePage = true; 
    } 
} 

In meinem app.component.ts Ich versuche, den isHomePage-Wert zu erhalten:

export class AppComponent { 

    constructor(private navigationService : NavigationService) { 

    console.log("HELLO"); 
    console.log(navigationService.isHomePage); 
    if(navigationService.isHomePage) 
     console.log("HOME"); 
}} 

navigationService.isHomePage ist undefined

Was mein Fehler ist?

Answer 1

Ich würde empfehlen, die official documentation zu lesen, da es sehr prägnant ist und Beispiele verwendet.

Der Angular Router ermöglicht die Navigation von einer Ansicht zur nächsten, wenn Benutzer Anwendungsaufgaben ausführen.

Sie würden eine Komponente an eine Route binden, sodass, wenn ein Benutzer dorthin navigiert, die richtige Vorlage angezeigt wird.

Um eine gemeinsame Navigation zu haben, müssen Sie es außerhalb Ihrer router-outlet platzieren, daher wird der Inhalt Ihrer Ansichten in besagtem Outlet enthalten sein, aber nicht in der Navigation.

__

Wenn Sie nicht wollen, es in Ihrer Homepage angezeigt werden Sie tun, kann der folgende:

eine NavigationService erstellen, die einen boolean isHomepage enthält, setzen Sie ihn auf false, wenn Sie die Homepage verlassen, und wahr, sobald du dorthin navigierst.Injizieren Sie es in Ihrem Navigationskomponente und in der Vorlage:

<nav *ngIf="!_navigationService.isHomePage"></nav> 

Auf diese Weise wird es nur aus der Homepage angezeigt werden.