web-dev-qa-db-fra.com

Meilleure méthode pour définir différentes mises en page pour différentes pages en mode angulaire 4

Je suis novice dans angular 4. Ce que j'essaie de faire est de définir différents en-têtes et pieds de page pour différentes pages de mon application. J'ai trois cas différents:

  1. Connectez-vous, enregistrez la page (pas d'en-tête, pas de pied de page)

itinéraires: ['login', 'register']

  1. Page de site marketing (il s’agit du chemin racine et de son en-tête et de son pied de page; la plupart de ces sections viennent avant la connexion)

itinéraires: ['', 'à propos', 'contact']

  1. Pages enregistrées dans l'application (j'ai un en-tête et un pied de page différents dans cette section pour toutes les pages de l'application, mais cet en-tête et ce pied de page sont différents de ceux du site marketing.)

itinéraires: ['tableau de bord', 'profil']

Je lance l'application temporairement en ajoutant un en-tête et un pied de page à mon composant de routeur html. 

S'il vous plaît me conseiller une meilleure approche.

Ceci est mon code:

app\app.routing.ts

   const appRoutes: Routes = [
        { path: '', component: HomeComponent},
        { path: 'about', component: AboutComponent},
        { path: 'contact', component: ContactComponent},
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'profile', component: ProfileComponent },


        // otherwise redirect to home
        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>

app/home/home.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my home html</p>
</div>
<site-footer></site-footer>

app/about/about.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my about html</p>
</div>
<site-footer></site-footer>

app/login/login.component.html

<div class="login-container">
    <p>Here goes my login html</p>
</div>

app/dashboard/dashboard.component.html

<app-header></app-header>
<div class="container">
    <p>Here goes my dashboard html</p>
</div>
<app-footer></app-footer>

J'ai vu cette question sur le débordement de pile mais je n'ai pas eu une image claire de cette réponse 

angularangular-routingangular-templateangular-router
39
ninja dev

Vous pouvez résoudre votre problème en utilisant des itinéraires enfants.

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

Définissez votre itinéraire comme ci-dessous

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

Référence recommandée: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html

78
Rameez Rami

vous pouvez utiliser un enfant, par exemple.

const appRoutes: Routes = [
    { path: '', component: MainComponent,
        children:{
            { path: 'home'  component:HomeComponent},
            { path: 'about', component: AboutComponent},
            { path: 'contact', component: ContactComponent},
               ..others that share the same footer and header...

        }
    },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'admin', component:AdminComponent, 
         children{
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent }
               ..others that share the same footer and header...
         }
    }
    { path: '**', redirectTo: '' }
];

MainComponent et AdminComponent comme

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

le post parle de séparer dans différents fichiers les itinéraires

8
Eliseo