33 votes

Comment changer de mise en page dans Angular2

Quelle est la meilleure méthode pour utiliser deux présentations totalement différentes dans la même application Angular2? Par exemple, dans mon chemin / login, je veux avoir une boîte très simple centrée horizontalement et verticalement. Pour tout autre chemin, je veux mon modèle complet avec en-tête, contenu et pied de page.

61voto

oseintow Points 957

Dans votre composant principal du html, vous pouvez ajouter les lignes suivantes outlet qui vous va utiliser pour basculer de mise en page.

<router-outlet name="header"></router-outlet>
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>

Dans ce cas, vous pouvez configurer vos itinéraires pour changer l'en-tête, barre de navigation, si aucune et pied de page de votre application lorsque les changements de page. Ce qui suit est un exemple de la façon dont vous pouvez configurer vos itinéraires.

Exemple 1 Supposons le premier modèle a seulement l'en-tête et pied de page sans sidebar/navbar

export const welcome_routes: RouterConfig = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];

Exemple 2. C'est votre config des routes pour votre deuxième mise en page

 export const next_layout_routes: RouterConfig = [
  { path: 'go-to-next-layout-page', children:[
     { path: 'home', component: HomeComponent},
     { path: '' , component: Header2Component, outlet: 'header'}
     { path: '' , component: NavBar2Component, outlet: 'navbar'}
     { path: '' , component: Footer2Component, outlet: 'footer'}
  ]}
];

Avec ce son très facile d'ajouter un troisième et un quatrième et un ... mise en page de votre page.

Espérons que cette aide

** Mise à jour **

RouterConfig a été modifié pour les Routes.

Ainsi, le code ci-dessus va maintenant être

export const welcome_routes: Routes = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];

18voto

M K Points 510

Dans Angular 4 (et probablement aussi dans Angular 2), vous pouvez faire:

 const routes: Route[] = [
  {path: 'admin', redirectTo: 'admin/dashboard', pathMatch: 'full'},
  {
    path: 'admin',
    children: [
      {
        path: '', component: DefaultLayoutComponent,
        children: [
          {path: 'dashboard', component: DashboardComponent}
        ]
      },
      {
        path: '',
        children: [
          {path: 'login', component: LoginComponent}
        ]
      }
    ]
  }
]
 

En utilisant path: '' vous n'aurez pas à inventer différents espaces de noms url pour utiliser une présentation simple. Voici à quoi ressemblent les vues:

index.html:

 <router-outlet>
 

default-layout.html:

 <div class="sidebar"></div>
<div class="content">
  <router-outlet></router-outlet>
</div>
 

2voto

Un autre moyen simple est de définir les itinéraires des enfants:

 const appRoutes: Routes = [
  {
    path: 'fullLayout',
    component: FullLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }, {
    path: 'simpleLayout',
    component: SimpleLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }
];
 

/ fullLayout / view - affiche la structure de présentation complète

/ simpleLayout / view - affiche la structure de présentation simple

app.component.html

 <router-outlet></router-outlet>
 

full-layout.component.html

 <h1>Full layout</h1>
<router-outlet></router-outlet>
<h1>FOOTER</h1>
 

simple-layout.component.html

 <h1>Simple layout</h1>
<router-outlet></router-outlet>
 

-2voto

Sami Sayegh Points 15

Je recommande fortement de lire le tutoriel par l'Angulaire de l'équipe sur le routage ici.

Il y a une certaine configuration que vous aurez besoin de mettre en place, mais certaines des principales étapes sont les suivantes:

  • Créer un app.routes.js fichier où vous spécifiez le nom de l'itinéraire et le composant qui doit être chargé lorsque l'itinéraire est touché.

    import { provideRouter, RouterConfig }  from '@angular/router';
    import { LoginComponent } from 'components/login.component'
    
    const routes: RouterConfig = [
      {
        path: '/login', //name of the route
        component: LoginComponent //component to load when route is hit
      }
    ];
    
    export const appRouterProviders = [
      provideRouter(routes)
    ];
    
  • Dans le composant principal lorsque vous cliquez sur un lien (j'.e le nav-bar), vous aurez besoin d'ajouter [routerLink]= 'myRouteName' e.g "/login") et une paire de routeur-outlet balises qui est l'endroit où le nouveau composant (aka vue) sera inséré.

    import { Component } from '@angular/core';
    import { ROUTER_DIRECTIVES } from '@angular/router';
    
    @Component({
      selector: 'nav-bar',
      template: `
        <h1>{{title}}</h1>
        <a [routerLink]="['/login']">Login</a>
        <router-outlet></router-outlet>
       `,
      directives: [ROUTER_DIRECTIVES]
    })
    export class AppComponent {
    
    }
    

Espérons que cela aide. J'ai été en apprentissage angulaire 2 au cours du dernier mois, et la documentation sur angulaire.io a été d'une valeur inestimable. Vraiment claire, étape par étape, des explications sur beaucoup d'aspects, et un bon premier arrêt lors de l'obtention dans un nouveau sujet.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: