[英]Angular router 3 routerLink not working
I'm using Angular 2.0.0-rc3 with router 3.0.0-alpha.8. 我正在将Angular 2.0.0-rc3与路由器3.0.0-alpha.8一起使用。
I have a BookListComponent
with the following template: 我有一个带有以下模板的
BookListComponent
:
<nav>
<a routerLink="/new-book">New Book</a>
</nav>
<ul>
<li *ngFor="let book of books">{{ book.name }}</li>
</ul>
And then here's BookListComponent
itself: 然后是
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());
}
}
Not only does the link not take me to the /new-book
route (which, if visited "manually", works just fine), but the "link" isn't even a link - it's just black text. 链接不仅不能将我带到
/new-book
路线(如果“手动”访问,也可以正常工作),而且“链接”甚至都不是链接-只是黑色文本。
How can I get the link to work? 我如何获得链接才能工作?
I have ROUTER_DIRECTIVES
under providers
but it needed to be under directives
. 我在
providers
下有ROUTER_DIRECTIVES
,但必须在directives
下。 Moving it to directives
fixed the problem. 将其移至
directives
可解决此问题。
Here's my new BookListComponent
: 这是我的新
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());
}
}
Check if you are not missing the Router Outlet tag in the host's views HTML. 检查主机视图HTML中是否没有缺少路由器出口标签。
<router-outlet></router-outlet>
I use this as a reference: 我以此为参考:
https://angular.io/docs/ts/latest/guide/router.html https://angular.io/docs/ts/latest/guide/router.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.