Angular2 Beta出现异常“路由器没有提供者！（RouterLink->路由器）”

J King 发表于 Dev

J金

我已经为这件事敲了两天了。我正在尝试在Angular2 beta0.0.2中实现一些简单的路由。请注意，我正在使用typescript。

所以，我的理解是，我需要来引导我的根应用程序组件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: '/' })    
    ]);

角度应用程序加载并显示模板，但是没有链接可用，并且在控制台中出现以下错误：

例外：没有路由器的提供者！（RouterLink->路由器）angular2.dev.js

在我的index.html（我称为view.html）中，我已链接到所有相关的库，并包含router.dev.js，控制台的“ sources”选项卡显示所有必需的脚本已成功加载。

我已经阅读了有关Angular2和整个路由器文档的路由器链接错误的每个堆栈溢出问题，但找不到为什么我的无法正常工作。据我所知，我的代码与Angular2文档匹配

该文档显示ROUTER_DIRECTIVES包含诸如RouterOutlet和RouterLink之类的指令

问题？

如果我已成功将组件的指令设置为ROUTER_DIRECTIVES，为什么会收到“路由器没有提供者！RouterLink”错误？

SzabolcsDézsi

将您的引导过程移到s单独的文件中：

import {bootstrap} from 'angular2/platform/browser';
import {provide, Component} from 'angular2/core';
import {ShiftApp} from './app.component';

import {
    APP_BASE_HREF,
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    HashLocationStrategy,
    LocationStrategy
} from 'angular2/router';

bootstrap(ShiftApp, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    provide(APP_BASE_HREF, { useValue: '/' })
]);

将该新文件导入到index.html中：

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/boot')
    .then(null, console.error.bind(console));

这样做的好处可以在这里找到。

同样如注释中所述，引导您的根组件而不是子组件。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。