> = RC.5

导入RouterModule 参见https://angular.io/guide/router

@NgModule({ 
  imports: [RouterModule],
  ...
})

> = RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

< = RC.1

你的代码丢失了

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

你不能使用routerLink或router-outlet这样的指令，而不让组件知道它们。

虽然在Angular2中指令名称被修改为区分大小写，但元素仍然在名称中使用-，如<router-outlet>，以兼容web组件规范，在自定义元素的名称中要求使用-。

在全球范围内注册

要使ROUTER_DIRECTIVES全局可用，将这个提供者添加到bootstrap(…):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

那么就不需要再给每个组件添加ROUTER_DIRECTIVES了。

> = RC.5

导入RouterModule 参见https://angular.io/guide/router

@NgModule({ 
  imports: [RouterModule],
  ...
})

> = RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

< = RC.1

你的代码丢失了

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

你不能使用routerLink或router-outlet这样的指令，而不让组件知道它们。

虽然在Angular2中指令名称被修改为区分大小写，但元素仍然在名称中使用-，如<router-outlet>，以兼容web组件规范，在自定义元素的名称中要求使用-。

在全球范围内注册

要使ROUTER_DIRECTIVES全局可用，将这个提供者添加到bootstrap(…):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

那么就不需要再给每个组件添加ROUTER_DIRECTIVES了。

对于>= V5

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
    {path:'routing-test', component: RoutingTestComponent}
];

@NgModule({
    imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
    ]
})

组件:

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a routerLink="/routing-test" routerLinkActive="active">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

对于< V5

也可以使用RouterLink作为一个指令。指示:[RouterLink]。这对我很有用

import {Router, RouteParams, RouterLink} from 'angular2/router';

@Component({
    selector: 'my-app',
    directives: [RouterLink],
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

如果你使用共享模块，只需将RouterModule添加到声明了你的组件的模块中，不要忘记添加<router-outlet></router-outlet>

此处引用的RouterLink不起作用

我非常感谢@raykrow的回答，当一个人只有在测试文件中有这个问题!这就是我遇到它的地方。

因为有另一种方法来做备份是很有帮助的，所以我想提一下这个技巧，它也同样有效(而不是导入RouterTestingModule):

import { MockComponent } from 'ng2-mock-component';
. . .
TestBed.configureTestingModule({
  declarations: [
    MockComponent({
      selector: 'a',
      inputs: [ 'routerLink', 'routerLinkActiveOptions' ]
    }),
    . . .
  ]

(通常情况下，我们会在<a>元素上使用routerLink，但对其他组件相应地调整选择器。)

我想要提到这个替代解决方案的第二个原因是，尽管它在许多规范文件中都很有用，但在一个案例中我遇到了一个问题:

Error: Template parse errors:
    More than one component matched on this element.
    Make sure that only one component's selector can match a given element.
    Conflicting components: ButtonComponent,Mock

我不太清楚这个模拟和我的ButtonComponent是如何使用相同的选择器的，所以寻找替代方法将我引向了@raykrow的解决方案。

如果在单元测试时出现这个错误，请这样写。

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
  });
}));