Comment changer de mise en page dans Angular2

Question

Quelles sont les meilleures pratiques pour utiliser deux mises en page entièrement différentes dans la même application Angular2 ? Par exemple, dans ma route /login, je veux avoir une boîte très simple centrée horizontalement et verticalement, alors que pour toutes les autres routes, je veux mon modèle complet avec en-tête, contenu et pied de page.

Answer 1

Dans votre composant principal html, vous pouvez ajouter les sorties de routes suivantes que vous utiliserez pour changer de disposition.

<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 routes pour changer l'en-tête, la barre de navigation (le cas échéant) et le pied de page de votre application lorsque la page change. Voici un exemple de la façon dont vous pouvez configurer vos routes.

Exemple 1 Supposons que la première mise en page ne comporte que l'en-tête et le pied de page, sans barre latérale ni barre de navigation.

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. Voici la configuration de vos 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 cela, il est très facile d'ajouter une troisième et une quatrième et une ... mise en page à votre page.

J'espère que cela vous aidera

** Mise à jour de **

RouterConfig a été changé en Routes.

Ainsi, le code ci-dessus sera maintenant

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'}
  ]}
];

Answer 2

Dans Angular 4 (et probablement aussi dans Angular 2), vous pouvez le 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 d'url afin d'utiliser une mise en page 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>

Answer 3

Un autre moyen simple consiste à définir des routes pour les enfants :

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

/fullLayout/view - montre la structure complète de la mise en page

/simpleLayout/view - montre une structure de mise en page simple

app.component.html

<router-outlet></router-outlet>

composant.full-layout.html

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

composant.simple-layout.html

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

Answer 4

Je recommande vivement la lecture du tutoriel de l'équipe Angular sur le routage. aquí .

Il y a une certaine configuration que vous devrez mettre en œuvre, mais certaines des étapes clés sont :

• Créez un fichier app.routes.js dans lequel vous indiquez le nom de la route et le composant qui doit être chargé lorsque cette route est atteinte.

  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 où vous cliquerez sur un lien (c'est-à-dire la barre de navigation), vous devrez ajouter [routerLink]= 'myRouteName' (par exemple '/login') et une paire de balises router-outlet, où le nouveau composant (c'est-à-dire la 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 {
  
  }

J'espère que cela vous aidera. J'ai appris angular 2 au cours du dernier mois, et la documentation sur angular.io a été inestimable. Des explications très claires, étape par étape, sur de nombreux aspects, et un bon premier arrêt lorsque l'on aborde un nouveau sujet.