javascript - Angular2 路由器讨厌我的 AUX 路由

Question

2015 年 11 月 1 日更新

Aux 路由在 Alpha 45 中并没有得到很好的支持。 Link to Github Issue

支持@evan-plaice

原始问题

我看了 Brian Ford 关于 Angular2 路由器的演讲:https://youtu.be/z1NB-HG0ZH4

然后我开始尝试使用“Aux”路由，但我的代码抛出了大量错误。

我在 mgechev's Angular Seed 上使用 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 中，我放置了一个“登录”链接:

<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 Routes 的例子？

注意:我尝试让路由器与 Plunker 一起工作，但它不喜欢 URL 或其他东西，否则我会提供一个实际案例

2015 年 10 月 29 日更新第一个错误是路由器链接不允许您以任何方式使用“\”或“.\”。您必须指定路由名称。

Aux 仍然不工作...

Answer 1

routerLink匹配数组中第一个参数的路径

在您的情况下，它将匹配 /或 Home

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

改用这个:

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

据我所知，该参数是一个数组，因为路由还可以包含一个或多个通配符匹配项。

注意:Login在链接中使用指向路由的别名(即 as 字段)。

来源:

• angular2/src/router/router_link.ts

更新:

密切关注。 angular2 团队正计划更改 RouterLink/<router-link>至 RouterViewport/<router-viewport>在未来的版本中。

来源:angular/issues#4679

更新2:

• [路由器链接] -> [routerLink]