如何设置路由器-link？

Question

我阅读了几篇博文1, including the 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>

和路由配置：

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 这似乎已经改变。

link 指向路由的别名，别名必须是 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

如何设置路由器-link？

How to setup a router-link?

angular