更新11/1/15
从Alpha 45开始,Aux Routes不受支持。 Link to Github Issue
支持@ evan-plaice
原始问题
我在Angular2路由器上观看了Brian Ford的演讲:https://youtu.be/z1NB-HG0ZH4
我开始尝试使用" Aux"路线和我的代码丢失了很多错误。
上的 Alpha 44在我的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 内,我放了一个&#34;登录&#34;链接:
<p>Router Link to activate login form: <a [router-link]="['/',['Login']]">Login</a></p>
现在我在该组件中有其他路由器链接可以正常工作,但是当我添加此链接时给出了这个错误:
例外:
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 但它会抛出同样的错误。
注意:我尝试让路由器使用Plunker,但它不喜欢网址或其他我提供实时案例
2015年10月29日更新 第一个错误来自路由器链接,不允许你使用&#34; \&#34;或&#34;。\&#34;以任何方式。您必须指定路线名称。
Aux仍无效......
答案 0 :(得分:3)
routerLink匹配数组中第一个参数的路径
在您的情况下,它会匹配/
或Home
<a [routerLink]="['/',['Login']]">Login</a>
请改用:
<a [routerLink]="['/Login']">Login</a>
AFAIK,该参数是一个数组,因为路由还可以包含一个或多个通配符匹配。
注意:链接中使用的Login
指向路由的别名(即as
字段)。
来源:
<强>更新强>
留意。 angular2团队计划在将来的版本中将RouterLink
/ <router-link>
更改为RouterViewport
/ <router-viewport>
。
<强> UPDATE2:强>