角路由器3 routerLink不工作

Question

我使用的是路由器3.0.0-alpha.8的Angular 2.0.0-rc3。

我有一个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