Question

我已阅读多篇博文1，包括official documentation，router-link可使用以下标记进行设置：

<nav>
  <ul>
    <li><a router-link="start">Start</a></li>
    <li><a router-link="about">About</a></li>
    <li><a router-link="contact">Contact</a></li>
  </ul>
</nav>

和RouteConfig：

import { Start } from './components/start';
import { About } from './components/about';
import { Contact } from './components/contact';

// ...

@RouteConfig([
  { path: '/', component: Start, as 'start'}
  { path: '/about', component: About, as 'about'}
  { path: '/contact', component: Contact, as 'contact'}
])

使用2.0.0-alpha.31 build运行上述代码会产生以下错误：

TypeError: list.reduce is not a function in [red in null]
STACKTRACE:
Error: TypeError: list.reduce is not a function in [red in null]
    at ChangeDetectionError.BaseException (http://127.0.0.1:8000/static/app.js:9569:24)
    at new ChangeDetectionError (http://127.0.0.1:8000/static/app.js:13676:17)
    at AbstractChangeDetector.throwError (http://127.0.0.1:8000/static/app.js:14477:16)
    at AbstractChangeDetector.ChangeDetector_App_comp_0.detectChangesInRecords (eval at <anonymous> (http://127.0.0.1:8000/static/app.js:16974:17), <anonymous>:30:16)
    at AbstractChangeDetector._detectChanges (http://127.0.0.1:8000/static/app.js:14443:15)
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://127.0.0.1:8000/static/app.js:14464:19)
    at AbstractChangeDetector._detectChanges (http://127.0.0.1:8000/static/app.js:14447:15)
    at AbstractChangeDetector.detectChanges (http://127.0.0.1:8000/static/app.js:14438:74)
    at LifeCycle.tick (http://127.0.0.1:8000/static/app.js:34739:35)
    at tick (http://127.0.0.1:8000/static/app.js:30323:17)

Answer 1

定义router-link的标记是：

<nav>
  <ul>
    <li><a [router-link]="['/start']">Start</a></li>
    <li><a [router-link]="['/about']">About</a></li>
    <li><a [router-link]="['/contact']"Contact</a></li>
  </ul>
</nav>

请参阅https://github.com/angular/angular/issues/2845#issuecomment-122089915。

Answer 2

截至angular2/router@0.5.3 | 2.0.0-alpha.38这似乎已经改变了。

链接指向路由的别名，别名必须是CamelCase（技术上是PascalCase）。

<nav>
  <ul>
    <li><a [router-link]="['/Start']">Start</a></li>
    <li><a [router-link]="['/About']">About</a></li>
    <li><a [router-link]="['/Contact']"Contact</a></li>
  </ul>
</nav>

@RouteConfig([
  { path: '/', component: Start, name: 'Start'}
  { path: '/about', component: About, name: 'About'}
  { path: '/contact', component: Contact, name: 'Contact'}
])

看起来他们正在努力确保用户不要将绑定与路径路径混淆。

来源：

<强>更新

截至2.0.0-alpha.45

RouteConfig属性as已更改为name

来源：

angular/commit/7d83959

如何设置路由器链接？

2 个答案: