Angular

Appearance

Des routes enfants ​

Appelé aussi "routes imbriqués", les routes enfants permettent de mettre une navigation dans une vue.

Par exemple :

http://localhost/users/1337/profile

Affichera un composant Profile pour le profil de l'utilisateur

http://localhost/users/1337/roles

Affichera un composant Roles pour les différents rôles de l'utilisateur Cela peut s'apparenter à un menu avec des boutons changeant une page.

Nous pouvons donc créer un fichier user.router.ts que nous plaçons dans le dossier user. Notre structure est la suivante :

<root>
  user  
    user.component.ts
    user.module.ts
    user-profile.component.ts
    user-role.component.ts
    user.router.ts
  app.router.ts
  app.component.ts
  app.module.ts

Le fichier user.router.ts a ce code :

js
import {RouterModule, Routes} from '@angular/router';
import {UserComponent} from './user.component';
import {UserProfileComponent} from './user-profile.component';
import {UserRoleComponent} from './user-role.component';

const routes:Routes = [
  {
    path: 'users/:id',
    component:  UserComponent,
    children: [
          {
            path: 'profile',
            component: UserProfileComponent
          },
          {
            path: 'roles',
            component: UserRoleComponent
          }
      ]
  },
];

export const UserRouting = RouterModule.forChild(routes);
import {RouterModule, Routes} from '@angular/router';
import {UserComponent} from './user.component';
import {UserProfileComponent} from './user-profile.component';
import {UserRoleComponent} from './user-role.component';

const routes:Routes = [
  {
    path: 'users/:id',
    component:  UserComponent,
    children: [
          {
            path: 'profile',
            component: UserProfileComponent
          },
          {
            path: 'roles',
            component: UserRoleComponent
          }
      ]
  },
];

export const UserRouting = RouterModule.forChild(routes);

Le code est très ressemblant. Notez juste que nous avons la propriété children qui définit les différents composants pour le routeur enfant. Nous configurons le module avec forChild()

Ajouter au module ​

Comme pour le routeur parent, nous ajoutons aux modules racines (app.module.ts) :

js
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {UserModule} from './user/user.module';
import {AppComponent} from './app.component';
import {routing} from './app.router';
import {UserRouting} from './user/user.router';

@NgModule({
  imports: [BrowserModule, UserModule, routing, UserRouting],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {UserModule} from './user/user.module';
import {AppComponent} from './app.component';
import {routing} from './app.router';
import {UserRouting} from './user/user.router';

@NgModule({
  imports: [BrowserModule, UserModule, routing, UserRouting],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Router-Outlet ​

Le premier <router-outlet> se trouve dans AppComponent comme d'habitude. Le deuxième se trouve UserComponent.

js
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'other',
  template: `
    Utilisateur {{id}}
    <router-outlet></router-outlet>
  `
})
export class OtherComponent implements OnInit {

  id:number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => this.id = +params.id);
  }

}
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'other',
  template: `
    Utilisateur {{id}}
    <router-outlet></router-outlet>
  `
})
export class OtherComponent implements OnInit {

  id:number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => this.id = +params.id);
  }

}

Encore une chose à penser ​

Ici, nous avons un module nommé user.module.ts. Ce module intègre les 3 composants (UserComponent, UserProfileComponent et UserRoleComponent). Cependant, dans UserComponent ci-dessous, nous utilisons les directives du routeur. Pour que Angular puisse les utiliser, il faut importer le module routeur dans le module UserModule :

js
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {UserComponent} from './user.component';
import {UserProfileComponent} from './user-profile.component';
import {UserRoleComponent} from './user-role.component';

import {UserRouting} from './user/user.router';

@NgModule({
  imports: [BrowserModule, UserRouting],
  declarations: [UserComponent, UserProfileComponent, UserRoleComponent],
  exports: [UserComponent]
})
export class UserModule {

}
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {UserComponent} from './user.component';
import {UserProfileComponent} from './user-profile.component';
import {UserRoleComponent} from './user-role.component';

import {UserRouting} from './user/user.router';

@NgModule({
  imports: [BrowserModule, UserRouting],
  declarations: [UserComponent, UserProfileComponent, UserRoleComponent],
  exports: [UserComponent]
})
export class UserModule {

}