2015-10-28 6 views
8

UPDATE 11/1/15Angular2 маршрутизатор Ненавидит Мои AUX Маршруты

Aux Маршруты не поддерживаются очень хорошо, как Альфа 45. Link to Github Issue

реквизита к @ Evan-камбалы

Оригинальный вопрос

Я смотрел разговор Брайана Форда на Angular2 Router: https://youtu.be/z1NB-HG0ZH4

И я начал использовать маршруты «Aux», и мой код бросает массу ошибок.

Я на Альфа 44 на mgechev's Angular Seed

В моем компоненте app.ts это довольно стандартный, для RouteConfig У меня есть:

@RouteConfig([ 
    { path: '/', component: HomeCmp, as: 'Home' }, 
    { path: '/run', component: RunCmp, as: 'Run' }, 
    { path: '/manage', component: ManageCmp, as: 'Manage' }, 
    { path: '/user', component: UserCmp, as: 'User' }, 
    { path: '/settings', component: LocalSettingsCmp, as: 'Settings' }, 
    { aux: '/login', component: LoginCmp, as: 'Login' } 
]) 

Мой app.html:

<div id="main-content" class="full"> 
    <router-outlet></router-outlet> 
    <router-outlet name="login"></router-outlet> 
</div> 

Внутри HomeCmp Я установил ссылку «Войти»:

<p>Router Link to activate login form: <a [router-link]="['/',['Login']]">Login</a></p> 

Теперь у меня есть другие ссылки маршрутизатора в этом компоненте, который работает отлично, но когда я добавить ссылку дает мне эту ошибку:

Exception:

EXCEPTION: "/" is only allowed at the beginning of a link DSL. in [null] 
BrowserDomAdapter.logError @ angular2.dev.js?v=0.0.0:21835 
BrowserDomAdapter.logGroup @ angular2.dev.js?v=0.0.0:21846 
ExceptionHandler.call @ angular2.dev.js?v=0.0.0:4431 
(anonymous function) @ angular2.dev.js?v=0.0.0:19543 
NgZone._onError @ angular2.dev.js?v=0.0.0:10711 
errorHandling.onError @ angular2.dev.js?v=0.0.0:10630 
run @ angular2.dev.js?v=0.0.0:141 
(anonymous function) @ angular2.dev.js?v=0.0.0:10651 
zoneBoundFn @ angular2.dev.js?v=0.0.0:111 
lib$es6$promise$asap$$flush @ angular2.dev.js?v=0.0.0:1301 
angular2.dev.js?v=0.0.0:21835 

Ошибка:

Error: "/" is only allowed at the beginning of a link DSL. 
    at new BaseException (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:16034:21) 
    at RouteRegistry.generate (http://localhost:5555/lib/router.dev.js?v=0.0.0:1645:17) 
    at ChildRouter.Router.generate (http://localhost:5555/lib/router.dev.js?v=0.0.0:2044:43) 
    at RouterLink.Object.defineProperty.set [as routeParams] (http://localhost:5555/lib/router.dev.js?v=0.0.0:1323:52) 
    at AbstractChangeDetector.ChangeDetector_HomeCmp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20415:14), <anonymous>:118:40) 
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20209:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20192:12) 
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20196:12) 
    at AbstractChangeDetector._detectChangesInLightDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20253:14) 

Контекст:

{element: a, componentElement: home, context: HomeCmp, locals: Object, injector: Injector…} 

Он также бросает это:

TypeError: Cannot read property 'child' of undefined 
    at ChildRouter.Router.isRouteActive (http://localhost:5555/lib/router.dev.js?v=0.0.0:1803:77) 
    at RouterLink.Object.defineProperty.get [as isRouteActive] (http://localhost:5555/lib/router.dev.js?v=0.0.0:1315:29) 
    at AbstractChangeDetector.ChangeDetector_HomeCmp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20415:14), <anonymous>:153:44) 
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20209:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20192:12) 
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20196:12) 
    at AbstractChangeDetector._detectChangesInLightDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20253:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20193:12) 
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14) 

Но после первой ошибки, поэтому я не уверен, что если его вызвано первым или что.

Я также пробовал Way from the Angular2 API Docs , но он бросает те же ошибки.

  • Я что-то не так?
  • Этот синтаксис еще не поддерживается?
  • Есть ли пример того, кто использует Aux-маршруты правильно?

Примечание: Я пытался получать маршрутизатор работать с Plunker, но это не ваш URL, или что-то в противном случае я бы обеспечить живой случай

UPDATE 10/29/15 первая ошибка связана с каналом маршрутизатора, не позволяя вам использовать «\» или «. \» любым способом.Вы ДОЛЖНЫ указать имя маршрута.

Aux еще не работает ...

ответ

3

routerLink соответствует пути первого параметра в массиве

В вашем случае это будет соответствовать / или Home

<a [routerLink]="['/',['Login']]">Login</a> 

Используйте это вместо:

<a [routerLink]="['/Login']">Login</a> 

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

Примечание: Используемый в ссылке Login указывает на псевдоним маршрута (то есть поле as).

Источник:

Update:

Следите. Команда angular2 планирует изменить RouterLink/<router-link> на RouterViewport/<router-viewport> в следующем выпуске.

Источник: angular/issues#4679

Update2:

  • [маршрутизатора ссылка] -> [routerLink]
+1

Я считаю, что они меняют '<маршрутизатор-розетка>' не '' –

+0

Итак, ваша ссылка верна для ** стандартного ** маршрутизатора, но при использовании нескольких розеток и ссылки «Aux» они шо w используя массив в качестве второго параметра для указания имени aux. Что не работает ... Цель состоит в том, чтобы иметь несколько элементов '' на компоненте, но он не работает для меня. Мой вариант использования - это форма входа/регистрации, которая является примером из разговора ... –

+0

Да ... Я понял, что после факта. Похоже, они все еще работают над этим https://github.com/angular/angular/issues/4319 –

Смежные вопросы