Подтвердить что ты не робот

Angular 2 примера маршрутизатора + поддержка ввода в Routes

Я пытаюсь найти конкретный пример того, как использовать маршрутизатор в Angular 2. Кроме того, текущий angular2.d.ts вводный файл из 5 минут quickstart не поддерживает @Маршруты аннотации.

4b9b3361

ОТВЕТЫ

Ответ 2

Основной компонент и класс маршрутизации в Angular 2.

router-link - директива router-link используется для объявления ссылки в представлении. Его также могут содержать необязательные параметры.

Пример:

<a [router-link]="['/AboutUs']">About Us</a>

роутер-выход - его работа в качестве заполнителя для представления, чтобы затем отобразить компонент. Шаблон средств и templateUrl будут отображаться в том месте, где вы будете использовать директиву маршрутизатора.

Пример:

<router-outlet></router-outlet>

@RouteConfig. Мы сопоставляем URL-адреса с компонентами в этом разделе, которые используются внутри.

Пример:

@RouteConfig([
    {path: '/',        component: HomeComponent, as: 'Home'},
    {path: '/aboutus', component: AboutUsComponent, as: 'AboutUs'  }
    {path: '/contactus', component: ContactUsComponent, as: 'ContactUs'  }
])

RouteParams - параметр для компонента, отображаемого маршрутизатором.

Прочтите эту статью для более http://www.codeandyou.com/2015/11/understand-routing-in-angular-2.html

Ответ 3

Основная маршрутизация в Angular2 (обновлена ​​до бета-версии)

Во-первых, чтобы настроить маршрутизацию в Angular2, вам необходимо импортировать файл маршрутизатора в ваш основной файл index.html i.e

<script src="node_modules/angular2/bundles/router.dev.js"></script>

чем мы должны добавить <base href="/"> сразу после тега <head> в index.html, чтобы сообщить маршрутизатору, как составлять URL-адреса навигации. сделав это, мы просто установили базовую конфигурацию маршрутизации в angular.

Теперь пришло время настроить маршрутизацию, настроить наши маршрутизаторы в соответствии с потребностями, в основном нам нужны три основные вещи:

  • routerLink
  • маршрутизатор розетка
  • и @RouteConfig

routerLink -

RouterLink ожидает, что это значение будет массивом имен маршрутов, за которыми следуют параметры для этого уровня маршрутизации.

Цитата из официального

Первое имя маршрута должно быть добавлено с/,./или../. Если маршрут начинается с /, маршрутизатор будет искать маршрут от корня приложения. Если маршрут начинается с. /, маршрутизатор вместо этого будет смотреть текущие дочерние элементы компонента для маршрута. И если маршрут начинается с.. /, маршрутизатор будет смотреть на текущий родительский компонент

мы определяем routerLink следующим образом:

<a [routerLink]="['./HomeCmp']">Hello Routing</a>

Здесь мы можем предоставить параметр вместе с маршрутизацией, которые являются необязательными, также мы можем предоставить детальный маршрут отсюда. такой параметр -

<a [routerLink]="['./HomeCmp', {key : value}]">Hello Routing</a>

маршрутизатор-розетка

Роутер-розетка - это местозаполнитель, где данные маршрутизации должны отображаться на дисплее. Существует также другой тип маршрутизатора-выхода, называемый aux route. можно использовать так:

 <router-outlet></router-outlet>

@RouteConfig

Существуют различные свойства на пути routeConfig, путь, имя, компонент и т.д. Когда URL-адрес браузера изменяется, маршрутизатор ищет соответствующее RouteDefinition, из которого он может определить отображаемый компонент.

  • path - используется для определения того, что показано в качестве URL-адреса в адресной строке браузера.

  • name - должно использоваться как имя при определении имени routerLink.

    Компонент

  • - означает, что компонент должен быть загружен, пока этот маршрут активен.

  • useDefaultAs - установите true, если мы хотим установить это как маршрут по умолчанию.

пример -

@RouteConfig([
  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent, useDefaultAs : true}
])

Для получения дополнительной информации см. также

для детской маршрутизации см. также -

ОБНОВЛЕНИЕ К Angular2 RC

Есть много изменений в маршрутизации в Angular2 после того, как RC некоторые из них указывают, что я упомянул здесь, может помочь кому-то: -

  • angular2/router был изменен с помощью @angular/router (также вы можете использовать старые функции маршрутизации с использованием импорта @angular/router-deprecated, но на данный момент мы должны использовать @angular/router).

  • @RouteConfig был изменен с помощью @Routes.

например: -

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent}
])

В ближайшее время мне будет отказано в обновлении моего ответа в соответствии с обновлением в журнале изменений.

Ответ 5

Возможно, поздно, но попробуйте this one:)

Ответ 6

Маршрутизация в Angular 2 RC.1

Вот еще один ресурс, который вы можете попробовать (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