角路由器3 routerLink不起作用

Question

我正在將Angular 2.0.0-rc3與路由器3.0.0-alpha.8一起使用。

我有一個帶有以下模板的BookListComponent ：

<nav>
  <a routerLink="/new-book">New Book</a>
</nav>

<ul>
  <li *ngFor="let book of books">{{ book.name }}</li>
</ul>

然后是BookListComponent本身：

import { Component, OnInit } from '@angular/core';
import { BookService } from '../book.service';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-book-list',
  templateUrl: 'book-list.component.html',
  styleUrls: ['book-list.component.css'],
  providers: [ROUTER_DIRECTIVES, BookService]
})
export class BookListComponent implements OnInit {
  books: any;

  constructor(private bookService: BookService) {}

  ngOnInit() {
    this.bookService.getList()
      .subscribe(response => this.books = response.json());
  }

}

鏈接不僅不能將我帶到/new-book路線（如果“手動”訪問，也可以正常工作），而且“鏈接”甚至都不是鏈接-只是黑色文本。

我如何獲得鏈接才能工作？

Answer 1

我在providers下有ROUTER_DIRECTIVES ，但必須在directives下。 將其移至directives可解決此問題。

這是我的新BookListComponent ：

import { Component, OnInit } from '@angular/core';
import { BookService } from '../book.service';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-book-list',
  templateUrl: 'book-list.component.html',
  styleUrls: ['book-list.component.css'],
  providers: [BookService],
  directives: [ROUTER_DIRECTIVES]
})
export class BookListComponent implements OnInit {
  books: any;

  constructor(private bookService: BookService) {}

  ngOnInit() {
    this.bookService.getList()
      .subscribe(response => this.books = response.json());
  }

}

Answer 2

檢查主機視圖HTML中是否沒有缺少路由器出口標簽。

<router-outlet></router-outlet>

我以此為參考：
https://angular.io/docs/ts/latest/guide/router.html