Angular

Appearance

Utiliser des paramètres ​

configuration du routeur ​

Dans la configuration du routeur, nous ajoutons où se trouve les paramètres dans l'URL :

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

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

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: MainComponent },
  { path: 'other/:id', component: OtherComponent }
];

export const routing = RouterModule.forRoot(routes);
import { RouterModule, Routes } from '@angular/router';

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

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: MainComponent },
  { path: 'other/:id', component: OtherComponent }
];

export const routing = RouterModule.forRoot(routes);

:id indique que nous pouvons avoir un identifiant.

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

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

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

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

}

Dans le template, nous ajoutons le paramètre (ici, l'id est 1337)

Récupérer le paramètre dans le composant ​

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

@Component({
  selector: 'other',
  template: `
    Other with id {{id}}
    <button (click)="nav()">MainComponent</button>
  `
})
export class OtherComponent implements OnInit {
  id: number = 0;

  constructor(private route: ActivatedRoute, private router: Router) { }

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

  nav() {
    this.router.navigate(['/main']);
  }

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

@Component({
  selector: 'other',
  template: `
    Other with id {{id}}
    <button (click)="nav()">MainComponent</button>
  `
})
export class OtherComponent implements OnInit {
  id: number = 0;

  constructor(private route: ActivatedRoute, private router: Router) { }

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

  nav() {
    this.router.navigate(['/main']);
  }

}

Nous chargeons et initialisons le service ActivatedRoute. Nous récupérons le paramètre avec un Observable lorsque le composant est initialisé.

Angular utilise un Observable car le composant est construit (constructor) qu'une fois alors que le paramètre, lui, peut changer. Il faut donc observer l'événement avec un Observable.