web-dev-qa-db-fra.com

Suppression de l'en-tête et du pied de page lors de l'affichage de la page de déconnexion

J'ai ajouté le code ci-dessous dans mon app.component.html

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

et dans mon fichier de routage, j'utilise le code ci-dessous

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);

Le problème est que lorsque je rend la page de déconnexion, l'en-tête et le pied de page sont toujours présents. Ce qui est correct car mon en-tête contient également des informations sur l'utilisateur.

La deuxième chose est que j'ai TempComponent et TempComponent1, quand il rend je dois montrer en-tête et pied de page dans chaque composant aussi.

Y a-t-il une solution ou devrais-je changer mon approche? Je ne veux pas copier et coller l'en-tête et le pied de page dans chaque modèle.

angulartypescriptangular2-routing
8
Vaibhav

Vous pouvez ajouter une méthode userIsLogged () dans le composant racine de l'application, qui renvoie true si l'utilisateur est connecté et false sinon (votre composant peut utiliser un service pour vérifier cela). Vous pouvez ensuite utiliser la directive structurelle * ngIf pour masquer l'en-tête et le pied de page en fonction de la valeur de retour de la méthode.

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

Code mis à jour: 

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

Le meilleur moyen d'y parvenir est de créer un itinéraire séparé pour login/déconnexion/enregistrement/mot de passe oublié pages, mais si vous ne souhaitez pas modifier la structure de votre application, vous pouvez regarder NgSwitch qui permet de changer de vue en fonction conditions

0
anshuVersatile