Angular 2 - как использовать новый маршрутизатор Angular 2.0.0-rc.1

Ответ 1

Вот как использовать Angular 2 Router (RC1), по сравнению с бета-версией (устаревший):

• Routes заменяет RouteConfig.

• Внутри вашей конфигурации есть новый синтаксис:

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

  вместо:

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

• Использование routerLink теперь выглядит следующим образом:

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

  Вместо:

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

• Также больше нет RouteParams, вместо этого вы получаете параметры, используя крючки жизненного цикла маршрутизатора: CanActivate, OnActivate и CanDeactivate.

Если вы использовали параметры внутри ngOnInit, вы можете сделать это вот так:

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

В итоге у вас будет что-то вроде этого:

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
    }
}

Обновление (9/6/16): Кажется, что Angular 2 RC1 Router устарел, как старый. Новая рекомендация - использовать версию 3.0.0-alpha.3 из @ angular/router.

Вот больше информации в блоге Angular: http://angularjs.blogspot.co.il/2016/06/improvements-coming-for-routing-in.html

Ниже представлен обзор нового маршрутизатора: http://victorsavkin.com/post/145672529346/angular-router

И вот рабочий плункер: http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

Ответ 2

Это помогло мне начать работу с новым маршрутизатором: https://angular.io/docs/ts/latest/guide/router.html

РЕДАКТИРОВАТЬ: Выше ссылка пуста на данный момент.. кешированная версия благодаря tylerjgarland: https://web.archive.org/web/20160416143350/https://angular.io/docs/ts/latest/guide/router.html

Я также нашел, что Misko Hevery говорит о маршрутизаторе от ng-conf: https://www.youtube.com/watch?v=d8yAdeshpcw

ОБНОВЛЕНИЕ: Похоже, что маршрутизатор RC1 оставлен? https://github.com/angular/angular/issues/9088 Возможно, именно поэтому документы исчезли, а не завершились...

ОБНОВЛЕНИЕ 2: Теперь RC2 Router был выпущен: https://angular.io/docs/ts/latest/guide/router.html

Компонентный маршрутизатор находится в альфа-выпуске. Это рекомендуемый маршрутизатор Angular 2 и заменяет ранее устаревшие бета-версии и v2-маршрутизаторы.

эта строка в package.json для нового альфа-маршрутизатора:

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

как я узнал здесь: Установка Angular 2 RC2 w/new component router

Ответ 3

Вот еще один ресурс, который вы можете попробовать (Angular RC.1): https://playcode.org/routing-in-angular-2-rc-1/

И вот код: https://github.com/jlsuarezs/RoutingExample

Я рекомендую использовать Angular -CLI для создания новых маршрутов: https://github.com/angular/angular-cli

Пример: https://github.com/angular/angular-cli#generating-a-route

Ответ 4

Новая Angular 2 документация по маршрутизатору и работа по разработке. до этого вы можете использовать "@ angular/router-revrecated".

@Предложение AkhileshKumar хорошее, попробуйте это, я думаю, что все его покрытие распространяется на основное использование маршрутизатора.

Ответ 5

обновление для RC.1

Новый маршрутизатор @angular/router Angular2 RC.1 устарел.
Команда Angular снова работает над новым маршрутизатором.
Было предложено остаться со старым маршрутизатором @angular/router-deprecated, пока этот новый новый маршрутизатор не станет доступен

оригинальный

Документы для нового маршрутизатора работают. См. Например https://github.com/angular/angular.io/pull/1214

Новый маршрутизатор имеет несколько проблем, но в целом он работает нормально. Если вы не просто хотите узнать, как его использовать, я бы подождал, по крайней мере, для следующей версии Angular RC. Есть некоторые ранние пользователи, которые сообщили о нескольких проблемах, большинство из которых, вероятно, легко исправить.

Ответ 6

Рабочий вложенный код маршрутизации для angular2: "@angular/router": "2.0.0-rc.1", то есть с новым маршрутизатором:

Родительский маршрут:

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) {
  }
}

Детский маршрут

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) {
  }
}

Клонировать этот проект Основной проект Angular2 ( "2.0.0-rc.1" ) с аутентификацией (вход/выход) работает как проект-семестр, который использует @angular/router, т.е. новый маршрут