webentwicklung-frage-antwort-db.com.de

Kopf- und Fußzeile bei Anzeige der Logout-Seite entfernen

Ich habe folgenden Code in meiner app.component.html hinzugefügt

<app-header ></app-header>
<router-outlet></router-outlet>
<app-footer ></app-footer>

und in meiner Routing-Datei verwende ich den folgenden Code

import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
    { path: '', component: Home },
    { path: 'temp', component: TempComponent },
    { path: 'temp2', component: TempComponent2 },
    { path: 'logout', component: LogoutComponent },
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

Das Problem ist, wenn ich die Abmeldeseite rendere, sind Kopf- und Fußzeile noch vorhanden. Welches ist richtig, da meine Kopfzeile auch Benutzerinformationen enthält.

Zweitens habe ich TempComponent und TempComponent1. Beim Rendern muss ich auch Kopf- und Fußzeile in jeder Komponente anzeigen.

Gibt es eine Lösung oder sollte ich meinen Ansatz ändern? Ich möchte nicht die Kopf- und Fußzeile in jeder Vorlage kopieren und an ihnen vorbei.

8
Vaibhav

Ein Ansatz zur Vermeidung von Kopf-/Fußzeilen auf jeder Seite besteht darin, die Route so zu ändern, dass eine andere router-outlet auf der untergeordneten Ebene. Etwas wie das:

const appRoutes: Routes = [
    { 
      path: '', 
      children: [
        { path: '', component: HomeComponent },
        { path: 'temp', component: TempComponent },
        { path: 'temp2', component: TempComponent2 },
       ]
      component: HomeComponent
    },      
    { path: 'logout', component: LogoutComponent },
    { path: '**', redirectTo: '' }
];

Dann ist die oberste Ebene app.component.html Vorlage ist nur <router-outlet></router-outlet>

Und das home.component template enthält die Header- und Footer-Elemente sowie den untergeordneten Router-Ausgang.

Hier geht es darum, dass die Kopf-/Fußzeile aus der Stammvorlage entfernt wird, sodass sie nicht überall angezeigt wird.

Eine andere Möglichkeit besteht darin, dass Sie anstelle von Ausschneiden/Einfügen von Kopf- und Fußzeilen für alle Seiten, für die die Standardkopf-/Fußzeile verwendet werden soll, ein Umbruchelement erstellen können, z. ein standard-page.component.

<app-header></app-header>
   <ng-content></ng-content>
<app-footer></app-footer>

Dann können Sie sie in Home, Temp, Temp2 (nicht Abmelden) als "Standardseiten" umbrechen, für die Kopf-/Fußzeilen erforderlich sind.

Z.B. für TempComponent html.

<standard-page>
  //TempComponent content here ..
</standard-page>
21
Garth Mason

Sie können eine Methode userIsLogged () zur App-Stammkomponente hinzufügen, die true zurückgibt, wenn der Benutzer angemeldet ist, und false, wenn dies nicht der Fall ist (Ihre Komponente kann einen Dienst verwenden, um dies zu überprüfen). Sie können dann die Strukturanweisung * ngIf verwenden, um die Kopf- und Fußzeile abhängig vom Rückgabewert der Methode auszublenden.

<app-header *ngIf="userIsLogged()"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="userIsLogged()></app-footer>

Aktualisierter Code: 

    <app-header *ngIf="userIsLogged()"></app-header>
    <router-outlet></router-outlet>
    <app-footer *ngIf="userIsLogged()"></app-footer>
4
Faly

Dies erreichen Sie am besten - erstellen Sie eine separate Route für die Seiten login/logout/register/forget password. Wenn Sie jedoch Ihre App-Struktur nicht ändern möchten, können Sie unter NgSwitch nach Ansichten suchen, die zwischen Ansichten wechseln Bedingungen

0
anshuVersatile