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

Question

J'ai commencé à écrire un nouveau projet angulaire 2 et j'ai constaté que j'ai installé 2 routeurs angulaires:

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 angulaire comment utiliser le nouveau routeur. Par exemple, quel composant dois-je importer?

Donc mes questions sont:

1. Devrais-je utiliser les router-deprecated ?
2. Existe-t-il une bonne documentation sur l'utilisation du nouveau routeur?

Answer 1

Voici comment utiliser l'angle de 2 Routeur (RC1), par rapport à la bêta (obsolète) un:

• Routes remplace RouteConfig.

• À l'intérieur de votre config il y a une nouvelle syntaxe:

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

  au lieu de:

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

• À l'aide 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>

• Aussi il n'y a pas d' RouteParams plus, vous obtiendrez les paramètres à l'aide de le routeur du cycle de vie des crochets: CanActivate, OnActivate, et CanDeactivate.

Si vous avez utilisé les paramètres à l'intérieur d' ngOnInit, vous pouvez le faire comme ceci maintenant:

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

Vous finirez par avoir quelque chose comme ceci:

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 Angulaires 2 RC1-Routeur est obsolète comme l'ancienne. La nouvelle recommandation est d'utiliser la version 3.0.0-alpha.3 de @angulaire/routeur.

Voici plus d'infos à l'angle de blog: 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 ici, c'est un travail plunker: http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

Answer 2

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

EDIT: lien ci-Dessus est vide pour le moment.. version en cache grâce à tylerjgarland: https://web.archive.org/web/20160416143350/https://angular.io/docs/ts/latest/guide/router.html

J'ai aussi trouvé Misko Hevery du routeur parler de ng-conf utile: https://www.youtube.com/watch?v=d8yAdeshpcw

Mise à JOUR: Il semble que la RC1 Routeur est abandonné? https://github.com/angular/angular/issues/9088 C'est peut-être pourquoi les docs disparu plutôt que d'être terminé...

Mise à JOUR 2: La RC2 Routeur a été publié: https://angular.io/docs/ts/latest/guide/router.html

Le Composant Routeur est en version alpha. Cela est recommandé Angulaire 2 routeur et remplace la précédente obsolète beta v2 et des routeurs.

cette ligne, en package.json pour la nouvelle alpha routeur:

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

comme je l'ai trouvé ici: Installation Angulaire 2 RC2 w/ nouveau composant routeur

Answer 3

Voici une autre ressource, vous pouvez essayer (Angulaire de la 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 le Angulaires-CLI pour créer de nouvelles voies: https://github.com/angular/angular-cli

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

Answer 4

Nouvelle documentation sur le routeur angulaire 2 et travaux de développement en cours. jusqu'à ce que vous puissiez utiliser "@ angular / router-deprecated".

La suggestion de @AkhileshKumar est bonne, essayez-la, je pense que son utilisation couvre toutes les utilisations de base du routeur.

Answer 5

mise à jour pour le RC.1

Le nouveau routeur @angular/router de Angular2 RC.1 est obsolète.
L'Angulaire de l'équipe travaille sur la fourniture d'un nouveau routeur.
Il a été suggéré de rester avec le vieux - @angular/router-deprecated routeur jusqu'à ce que ce nouveau routeur devient disponible

d'origine

La documentation du routeur sont des travaux en cours. Voir, par exemple, https://github.com/angular/angular.io/pull/1214

Le nouveau routeur a quelques problèmes, mais dans l'ensemble fonctionne très bien déjà. Si vous ne voulez pas seulement à apprendre sur la façon de l'utiliser, j'attendrais au moins pour la prochaine Angulaire de la version RC. Il y a quelques early adopters qui ont signalé quelques problèmes où la plupart sont probablement facile à corriger.