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 :

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

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.

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 :

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 {

}