Advertisement
Guest User

Untitled

a guest
Mar 24th, 2017
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.04 KB | None | 0 0
  1. /////////////////////////////// Module dédié au routing
  2.  
  3. @NgModule({
  4. imports: [
  5. RouterModule.forRoot([
  6. {
  7. path: 'une-url', // url de la route, que l'on entre par exemple dans la barre d'adresse pour accéder à la route.
  8. component: ComposantCorrespondantALUrl // component qui sera affiché dans le html sur cette route.
  9. redirectTo: 'etc...'
  10. // Toute adresse préfixée par la valeur saisie dans path sera redirigé vers l'url saisie dans redirectTo.
  11. // Il est possible de rediriger uniquement si l'url saisie est exactement celle qui est saisie
  12. // dans path, en ajoutant pathMatch:'full'
  13. },
  14. {
  15. path: 'une-autre-url',
  16. component: UnAutreComposant
  17. },
  18.  
  19. etc...
  20.  
  21. ])
  22. ],
  23. exports: [
  24. RouterModule
  25. ]
  26. })
  27. export class AppRoutingModule {}
  28.  
  29.  
  30. //////////////////////////////////////// url dynamiques
  31.  
  32. 'www.monsuperblog.com/posts/:post_id' //ou :post_id correspond à une "variable" représentant l'id du post.
  33.  
  34. // dans votre composant :
  35.  
  36. export class MonComposant {
  37. constructor (route:ActivatedRoute) { }
  38.  
  39. ngOnInit () {
  40. this.route.params.subscribe((params: Params) => {
  41. const ID = params['id'];
  42. });
  43. }
  44. }
  45.  
  46. ///////////////////////////////////// à rajouter dans la template du composant racine du projet
  47.  
  48. '<router-outlet>' //Le point d'entrée dans nos templates sur lequel vont venir se greffer les composants
  49.  
  50.  
  51.  
  52. ///////////////////////////////////// navigation via la template
  53.  
  54. '<a routerLink="/mon-url">Bla</a>' // version simple
  55. '<a [routerLink]="['/posts', idDePoste]">Bla</a>' //version bindé aux valeurs du composant
  56.  
  57.  
  58. //////////////////////////////////// navigation a partir du code du composant
  59.  
  60. export class MonComposant {
  61. constructor (private router:Router) { }
  62.  
  63. etc...
  64.  
  65. superMethodeDeComposant (id:string) {
  66. this.router.navigate(['/posts', id]);
  67. }
  68.  
  69. etc...
  70.  
  71. //////////////////////////////////// retour simple
  72.  
  73. window.history.back();
  74.  
  75. ////////////////////////////////////// ne pas oublier :
  76.  
  77. <base HREF="/"> // dans le code de la page index.html
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement