web-dev-qa-db-fra.com

Angular 2 - comment utiliser le nouveau routeur angular 2.0.0-rc.1)

J'ai commencé à écrire un nouveau projet angular 2 et j'ai trouvé que j'avais installé 2 angular router:

  1. "@angular/router": "2.0.0-rc.1",
  2. "@angular/router-deprecated": "2.0.0-rc.1",

Je n'ai pas trouvé dans le site angular comment utiliser le nouveau routeur. Par exemple, quel composant dois-je importer.

Mes questions sont donc:

  1. Dois-je utiliser le router-deprecated?
  2. Existe-t-il un bon document pour savoir comment utiliser le nouveau routeur?
javascriptangularangular2-routing
37
ofir fridman

Voici comment utiliser le Angular 2 Router (RC1), par rapport à la version bêta (obsolète):

  • Routes remplace RouteConfig.

  • A l'intérieur de votre configuration, il y a une nouvelle syntaxe:

    {path: '/path', component: MyPathComponent}

    au lieu de:

    {path:'/path', name: 'MyPath', component: MyPathComponent}

  • L'utilisation de routerLink est maintenant comme ça:

    <a [routerLink]="['/path/2']">Click to navigate</a>

    Au lieu de:

<a [routerLink]="['MyPath', 'Detail', {id:2}]">Shark Crisis</a>

  • De plus, il n'y a plus de RouteParams, à la place, vous obtenez les paramètres en utilisant les hooks de cycle de vie du routeur: CanActivate, OnActivate et CanDeactivate.

Si vous avez utilisé des paramètres dans ngOnInit, vous pouvez le faire comme ceci maintenant:

routerOnActivate(curr: RouteSegment): void {
           curr.getParam('id');
       }

Vous finirez par avoir quelque chose comme ça:

import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";

@Injectable()
@Component({
    selector: "my-app",
    templateUrl: `<a [routerLink]="['/component1']">Click to go to component 1</a>`,
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
    {path: "/component1", component: Component1},
    {path: "/component2", component: Component2}
])
export class AppComponent {
    constructor(private _router: Router) {
        //If you want to use Router in your component (for navigation etc), you can inject it like this
    }
}

Mise à jour (9/6/16): Il semble que Angular 2 RC1 Router est déprécié comme l'ancien) La nouvelle recommandation est d'utiliser la version 3.0.0-alpha.3 de @ angular/router.

Voici plus d'informations sur le blog Angular: http://angularjs.blogspot.co.il/2016/06/improvements-coming-for-routing-in.html

Voici un aperçu du nouveau routeur: http://victorsavkin.com/post/145672529346/angular-router

Et voici un plongeur de travail: http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

38
Eran Shabi

Cela m'a aidé à démarrer avec le nouveau routeur: https://angular.io/docs/ts/latest/guide/router.html

EDIT: Le lien ci-dessus est vide pour l'instant .. version mise en cache grâce à tylerjgarland: https://web.archive.org/web/ 20160416143350/https: //angular.io/docs/ts/latest/guide/router.html

J'ai également trouvé utile le discours sur le routeur de Misko Hevery de ng-conf: https://www.youtube.com/watch?v=d8yAdeshpcw

MISE À JOUR: Il semble que le routeur RC1 soit abandonné? https://github.com/angular/angular/issues/9088 C'est peut-être pour cela que les documents ont disparu plutôt que d'être terminés ...

MISE À JOUR 2: Le routeur RC2 est maintenant disponible: https://angular.io/docs/ts/latest/guide/router .html

Le routeur de composants est en version alpha. Il s'agit du routeur recommandé Angular 2 et remplace les routeurs obsolètes bêta et v2 précédents.

cette ligne dans package.json pour le nouveau routeur alpha:

"@angular/router": "3.0.0-alpha.7",

comme je l'ai découvert ici: Installation Angular 2 RC2 avec nouveau routeur de composant

11
Steve

Voici une autre ressource que vous pouvez essayer (Angular RC.1): https://playcode.org/routing-in-angular-2-rc-1/

Et voici le code: https://github.com/jlsuarezs/RoutingExample

Je vous recommande d'utiliser l'Angular-CLI pour créer de nouvelles routes: https://github.com/angular/angular-cli

Exemple: https://github.com/angular/angular-cli#generating-a-route

6
Eusthace

Nouveau Angular 2 documentation de routeur et travaux de développement en cours. Jusqu'à ce que vous puissiez utiliser "@ angular/router-deprecated".

La suggestion de @AkhileshKumar est bonne, essayez cela, je pense que tout couvre l'utilisation de base du routeur.

5
Vinay Pandya

mise à jour pour RC.1

Le nouveau routeur @angular/router d'Angular2 RC.1 est obsolète.
L'équipe Angular travaille de nouveau à fournir un nouveau routeur.
Il a été suggéré de rester avec l'ancien @angular/router-deprecated routeur jusqu'à ce que ce nouveau nouveau routeur soit disponible

original

Les documents pour le nouveau routeur sont en cours d'élaboration. Voir par exemple https://github.com/angular/angular.io/pull/1214

Le nouveau routeur a quelques problèmes, mais dans l'ensemble, il fonctionne déjà bien. Si vous ne voulez pas simplement apprendre à l'utiliser, j'attendrais au moins la prochaine Angular RC version. Il y a quelques premiers utilisateurs qui ont signalé quelques problèmes où la plupart sont probablement facile à réparer.

4
Günter Zöchbauer

Code de routage imbriqué de travail pour angular2: "@ angular/router": "2.0.0-rc.1" c'est-à-dire avec un nouveau routeur sont les suivants:

Route parente:

import {Component} from '@angular/core';
import {Router,Routes,ROUTER_DIRECTIVES} from '@angular/router';

import {Login} from '../login/login';
import {Dashboard} from '../dashboard/dashboard';
import {Admin} from '../admin/admin';
let template = require('./app.html');

@Component({
  selector: 'auth-app',
  template: template,
  directives: [ROUTER_DIRECTIVES],
})

@Routes([
  {path: '/login', component: Login},
  {path: '/dashboard', component: Dashboard},
  {path: '/admin', component: Admin }
])

export class App{
  constructor(public router: Router) {
  }
}

Route des enfants

import { Component} from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { Router, ROUTER_DIRECTIVES ,Routes} from '@angular/router';

import {AddUsrCat} from './addUsrCat/addUsrCat';
import {AllUsr} from './allUsr/allUsr';
declare var jQuery:JQueryStatic;
let template = require('./admin.html');

@Component({
  selector: 'admin',
  directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES],
  template: template
})
@Routes([
  {path: '/addUsrCat', component: AddUsrCat},
  {path: '/allUsr', component: AllUsr},
  {path: '*', component: AddUsrCat},
])

export class Admin {
  constructor(public router: Router, public http: Http) {
  }
}

Clonez ce projet n projet de base Angular2 ("2.0.0-rc.1") avec authentification (connexion/déconnexion) fonctionne comme projet de départ qui utilise @ angular/routeur ie nouvelle route

3
Akhilesh Kumar