打字稿 – Angular2 beta获得异常“没有路由器提供商！ (RouterL

发布时间：2020-12-17 17:15:47 所属栏目：安全来源：网络整理

导读：我两天来一直在反对这个问题.我试图在Angular2 beta0.0.2中实现一些简单的路由.请注意我正在使用打字稿. 所以我的理解是我需要使用ROUTER_PROVIDERS引导我的根应用程序组件,以便这些服务可用于我的应用程序并为要实现路由到ROUTER_DIRECTIVES的组件设置指令.

我两天来一直在反对这个问题.我试图在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找到.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!