我两天来一直在反对这个问题.我试图在Angular2 beta0.0.2中实现一些简单的路由.请注意我正在使用打字稿.
所以我的理解是我需要使用ROUTER_PROVIDERS引导我的根应用程序组件,以便这些服务可用于我的应用程序并为要实现路由到ROUTER_DIRECTIVES的组件设置指令.
这是我有的：
//ANGULAR ******************************
import {provide,Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
APP_BASE_HREF,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,HashLocationStrategy,LocationStrategy,RouteConfig,} from 'angular2/router';
//COMPONENTS ******************************
import {ShiftCalendarComponent} from './components/calendar/shift-calendar.component';
import {ShiftAdminComponent} from './components/admin/shift-admin.component';
import {ShiftListComponent} from './components/shifts/shift-list.component';
//CLASS ******************************
@Component({
selector: 'shift-app',directives: [ROUTER_DIRECTIVES],template: `<div>
<nav>
<h3> Navigation: </h3>
<ul>
<li><a [routerLink]="['Calendar']" > Home </a></li>
<li><a [routerLink]="['Admin']" > About </a></li>
<li><a [routerLink]="['Shifts']" > Contact us </a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>`
})
@RouteConfig([
{ path: '/',name: 'root',redirectTo: ['/Calendar'] },{ path: '/calendar',name: 'Calendar',component: ShiftCalendarComponent },{ path: '/admin',name: 'Admin',component: ShiftAdminComponent },{ path: '/shifts',name: 'Shifts',component: ShiftListComponent }
])
export class ShiftApp { }
//BOOTSTRAP ******************************
bootstrap(ShiftApp,[
ROUTER_PROVIDERS,provide(LocationStrategy,{ useClass: HashLocationStrategy }),provide(APP_BASE_HREF,{ useValue: '/' })
]);
角度应用程序加载并显示模板,但没有链接工作,我在控制台中收到以下错误：
EXCEPTION: No provider for Router! (RouterLink -> Router) angular2.dev.js
在我的index.html(我称之为view.html)中,我已链接到所有相关库,并且包含了router.dev.js,我的控制台的sources选项卡显示我已成功加载所有需要的脚本.
我已经阅读了关于Angular2和整个路由器文档的路由器链接错误的每个堆栈溢出问题,但无法找到为什么我的工作不正常.据我所知,我的代码匹配the Angular2 Documentation
This documentation显示ROUTER_DIRECTIVES包含RouterOutlet和RouterLink等指令
题？
如果我成功地将组件的指令设置为ROUTER_DIRECTIVES,为什么我得到“No Router for Router！RouterLink”错误？
解决方法
将引导过程移动到单独的文件中：
import {bootstrap} from 'angular2/platform/browser';
import {provide,Component} from 'angular2/core';
import {ShiftApp} from './app.component';
import {
APP_BASE_HREF,LocationStrategy
} from 'angular2/router';
bootstrap(ShiftApp,[
ROUTER_PROVIDERS,{ useValue: '/' })
]);
在index.html中导入该新文件：
System.config({
packages: {
app: {
format: 'register',defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null,console.error.bind(console));
这样做的优点可以在here找到.
同样如注释中所述,引导您的根组件而不是子组件.
