Plusieurs mises en page pour différentes pages en Angular 2

Question

J'ai une page de connexion - juste 2 entrées (pas d'en-tête, pas de pied de page, pas de barre latérale)

Lorsqu'un utilisateur se connecte, il doit être dirigé vers une page comportant un en-tête, un pied de page et une barre de navigation de droite.

la seule chose qui change sur la page intérieure est le contenu du côté droit.

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'pm-app',
  template: `
  <div>
      <router-outlet></router-outlet>
   </div>
   `,
   styleUrls:["app/app.component.css"],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  pageTitle: string = 'Acme Product Management';
}

Je comprends cela app.component est comme une page principale où vous pouvez ajouter l'en-tête et le pied de page et le <router-outlet></router-outlet> est l'endroit où le contenu change en fonction du routage.

Comment créer une mise en page pour la page de connexion et une autre mise en page avec en-tête, pied de page et barre latérale droite pour la page intérieure ?

Answer 1

Vous pouvez utiliser des routes enfant pour utiliser différentes mises en page pour différentes vues.

Voici un exemple courant d'utilisation des routes enfant dans Angular2

J'aime utiliser les routes enfant pour séparer les pages sécurisées et les pages non sécurisées dans mes applications angulaires 2.

Dans la racine de mon application, j'ai deux répertoires

/Public

&

 /Secure

Maintenant, dans le répertoire racine, j'ai aussi

/app.routing.ts

à partir de là, je crée un dossier de mises en page,

/layouts

Dans ce répertoire, je crée

/layouts/secure.component.ts
/layouts/secure.component.html

&

/layouts/public.component.ts
/layouts/public.component.html

à partir de là, je peux dévier mes routes vers l'une des deux mises en page, selon que la page est destinée à être sécurisée ou publique. Pour ce faire, je crée une route pour chaque disposition dans mon fichier Root routes.ts.

/app.routes.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

Remarquez que j'enregistre mes routes enfant pour chaque disposition. C'est la valeur exportée de chaque fichier de route séparé. L'un est dans le répertoire public et l'autre dans le répertoire sécurisé.

/public/public.routes.ts

export const PUBLIC_ROUTES: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'p404', component: p404Component },
    { path: 'e500', component: e500Component },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'home', component: HomeComponent },
    { path: 'benefits', component: BenefitsComponent },
    { path: 'services', component: ServicesComponent },
    { path: 'education', component: EducationComponent },
    { path: 'products', component: ProductsComponent },
    { path: 'fcra', component: FcraComponent },
    { path: 'croa', component: CroaComponent },
    { path: 'building', component: BuildingComponent },
    { path: 'tips', component: TipsComponent },
    { path: 'maintenance', component: MaintenanceComponent }
];

Tous ces itinéraires sont maintenant accessibles en tant qu'itinéraires enfants pour mon aménagement public. Ce qui nous amène maintenant à protéger nos vues sécurisées.

Donc, dans le répertoire sécurisé, je fais essentiellement la même chose,

/secure/secure.routes.ts

export const SECURE_ROUTES: Routes = [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
    { path: 'overview', component: OverviewComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'reports', component: ReportsComponent },
    { path: 'recommendations', component: RecommendationsComponent },
    { path: 'score-simulator', component: ScoreSimulatorComponent },
    { path: 'payment-method', component: PaymentMethodComponent },
    { path: 'lock-account', component: LockAccountComponent }
];

Cela me permet d'utiliser auth pour protéger ces routes d'enfants maintenant. Si vous vous rappelez dans

/app.routes.ts nous avons fait cela pour les routes sécurisées,

{ path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }

Remarquez le [Guard] . Cela nous permet de protéger toutes les routes enfant pour la mise en page sécurisée. C'est l'une des raisons pour lesquelles j'utilise des routes enfant. Je pourrais vous en dire beaucoup plus mais je pense que c'est l'explication la plus raisonnable.

Pour aller un peu plus loin et mettre les choses en perspective pour vous, voici comment je [Guard] les pages sécurisées. Créer un service et implementing CanActivate

@Injectable()
export class Guard implements CanActivate {

    constructor(protected router: Router, protected auth: Auth ) {}

     canActivate() {
        if (localStorage.getItem('access_token')) {
            // logged in so return true
            return true;
        }
        // not logged in so redirect to login page
        this.router.navigate(['/home']);
        return false;
    }
}

Cela vous permet de servir la mise en page publique avec <router-outlet></router-outlet> puis utiliser un en-tête et un pied de page différents dans la mise en page. Utilisez ensuite <router-outlet></router-outlet> dans la mise en page sécurisée à nouveau et évidemment un en-tête et un pied de page différents. Faites-moi savoir si j'ai laissé quelque chose d'obscur et je mettrai à jour la réponse.

Answer 2

Vous pouvez résoudre votre problème en utilisant des routes enfant.

Voir la démo de travail à https://angular-multi-layout-example.stackblitz.io/ ou modifier à https://stackblitz.com/edit/angular-multi-layout-example

Définissez votre itinéraire comme suit

const appRoutes: Routes = [

    //Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },

    // App routes goes here here
    { 
        path: '',
        component: AppLayoutComponent, 
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    //no layout routes
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

Answer 3

Vous pouvez avoir plusieurs router-outlet et rediriger où vous voulez. Par exemple, la page de connexion peut être la page de destination si l'utilisateur n'est pas connecté et si l'utilisateur est connecté, vous redirigez l'utilisateur vers une page principale où vous avez l'en-tête et le pied de page et toutes les autres pages peuvent être des enfants de ce composant. Par exemple, nous avons notre application comme ceci

<my-app></my-app>

dans mon-composant vous avez un

<router-outlet></router-outlet> ¨ vous avez un composant de connexion et vous pouvez utiliser ce routage pour cette page comme ceci

 { path: '', component: LoginComponent}

comme indiqué précédemment, il peut s'agir d'une page de destination et vous ne voulez pas montrer autre chose que les détails de connexion. Une fois que l'utilisateur s'est connecté, vous redirigez l'utilisateur vers le composant principal et le composant principal aura un routage comme celui-ci

{chemin : 'masterpage', composant : MasterComponent}

et le composant maître aura aussi une sortie de routeur

<router-outlet></router-outlet>

maintenant quand vous voulez montrer à l'utilisateur d'autres pages comme about us. alors vous redirigez l'utilisateur vers la page about us comme ceci

{ canActivate: [AuthGuard], component: MasterComponent , path: 'masterpage',
  children:[
           {   canActivate: [AuthGuard],
               component: AboutUsComponent ,
               path: 'aboutus'
           }]
}

et de cette façon vous aurez des détails comme l'en-tête et le pied de page partout où vous naviguerez. J'espère que cela vous aidera !

Answer 4

Remarquez la sortie du routeur. C'est là que votre contenu sera affiché. Voici un exemple de mon app.component.html. Dans ce cas, la redirection se fait vers le composant home.component et il est affiché dans le router outlet.

<div class="ui-grid ui-grid-responsive ui-grid-pad">
    <div class="ui-g borderDiv" [ngStyle]="appPageHeaderDivStyle">
        <div class="ui-g-12" *ngIf="!isLoggedIn">
            <div class="ui-g">
                <div class="ui-xl-2">
                    <img class="logo" src="./app/resources/KetoLightLogo.png">
                </div>
                <div class="ui-xl-7">
                </div>
                <div class="ui-xl-3 ui-g-nopad" style="width: 320px; margin-left: 80px; float: right; ">
                    <div>
                        <p-menubar class="pMenuBar" [model]="items"></p-menubar>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui-g-12" *ngIf="isLoggedIn">
            <div class="ui-g">
                <div class="ui-xl-2">
                    <img class="logo" src="assets/KetoLightLogo.png">
                </div>
                <div class="ui-xl-4">
                    <label class="ui-widget loggedInLabel">Logged in as: jbaird@arsbirder.com</label>
                </div>
                <div class="ui-xl-6 ui-g-nopad" style="width: 525px;  margin-left: 270px; float: right; ">
                    <p-menubar [model]="items"></p-menubar>
                </div>
            </div>
        </div>
    </div>
</div>

<router-outlet></router-outlet>

<div class="ui-grid ui-grid-responsive ui-grid-pad">
    <div class="ui-g borderDiv" [ngStyle]="appPageHeaderDivStyle">
        <div class="ui-g-12">
            <div class="ui-g">
                <div class="ui-g-12 ui-md-12 ui-lg-12">
                    <div class="ui-g-row">
                        <div class="ui-g-12">
                            <div class="ui-g-12 ui-md-12 ui-lg-12">
                                <div class="ui-g-1 ui-md-4 ui-lg-5">
                                </div>
                                <div class="ui-g-10 ui-md-4 ui-lg-2">
                                    <p class="copyright">Copyright 2016 Xamlware, Inc.</p>
                                    <p class="copyright2">All rights reserved</p>
                                </div>
                                <div class="ui-g-1 ui-md-4 ui-lg-5">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>