p-tabMenu 抛出“没有路由器提供程序！”例外答案

【问题标题】：p-tabMenu throw "No provider for Router!" exceptionp-tabMenu 抛出“没有路由器提供程序！”例外
【发布时间】：2016-11-07 03:16:30
【问题描述】：

美好的一天。我想创建一个简单的tabmenu，就像primeng教程一样，我只想显示它。但我得到“没有路由器提供商！”例外。这个带有 tabmenu 的 us 组件：

<div class="ui-g">
    <h1>Heeey!</h1>
    <p-tabMenu ([ngModel])="menuItems"></p-tabMenu>
</div>


@Component({
    selector: 'test',
    templateUrl: './Views/test.html',
    directives: [ROUTER_DIRECTIVES, DataScroller, DataGrid, Panel, TabMenu],
    styleUrls: ['../../Styles/EntranceStyle.css'],
    providers: [Http, HTTP_PROVIDERS]
})

export class TestComponent implements OnInit {
    public _tests: TestModel[] = new Array<TestModel>();
    public products: TestModel[] = new Array<TestModel>();

    private menuItems: MenuItem[];

    ngOnInit() {

        this.menuItems = [
           { label: 'Coffee'},
           { label: 'Sweets'},
           { label: 'Salads'},
        ];
    }
}

我在启动时声明了 ROUTER_PROVIDERS：bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, AUTH_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy} )] );

【问题讨论】：

您使用哪个版本的 Angular2？最新版本中有关路由的一些更改...
@ThierryTemplier 版本为 2.0.0-rc.1

标签： typescript angular primeng

【解决方案1】：

首先你应该更新到最新的primeng和对应支持的angular2版本（这两个项目仍在开发中，路由器最近已经更改和增强）；这意味着：primeng-beta9 和 angular2-rc3（2016 年 7 月）。

然后，您需要在文件app.routes.ts 中创建一个RouterConfig：

export const routes: RouterConfig = [
    {path: '/', component: MyComponent}
]

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

然后将它们添加到boot.ts：

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  disableDeprecatedForms(),
  provideForms(),
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

在AppComponent 中你需要指定路由指令：

@Component({
    selector: 'my-selector',
    templateUrl: 'my.html',
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
//... blahblahblah
}

记得在<head> 中添加<base href="/">。

来源：https://angular.io/docs/ts/latest/guide/router.html

【讨论】：

好答案！一件事，您可以添加“”或者您可以将“provide(APP_BASE_HREF, {useValue : '/' })”添加到引导程序。此外，更新库时要小心，阅读文档并检查它是否不会破坏您的项目。我将在这里留下一个演示 plnkr.co/edit/zQ43rV?p=preview :)