Créer un simple routeur

Dans le module, nous définissons les chemins pour les composants :

import { RouterModule, Routes } from '@angular/router';

import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

const routes: Routes = [
  { path: '', component: MainComponent },
  { path: 'other', component: OtherComponent }
];

export const routing = RouterModule.forRoot(routes);

On admet que nous avons 2 composants : MainComponent et OtherComponent. Nous créons donc un tableau définissant les différentes routes.

Lorsque le chemin entier de l'URL ne possède pas de nom, alors on redirige l'utilisateur vers main.

Nous exportons le module RouterModule configuré avec nos routes.

Chargeons le module routing

Nous ajoutons le module configuré dans le tableau imports :

import {BrowserModule} from '@angular/platform-browser';
import {routing} from './app.routes';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

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

}

Utiliser les directives pour naviguer

Le composant parent utilise des directives pour naviguer avec le routeur :

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <ul>
      <li><a routerLink="/">main</a></li>
      <li><a routerLink="/other">other</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

La directive routerLink indique le chemin du composant. Ce dernier est inséré dans l'élément <router-outlet> dynamiquement