Question

美好的一天。我想在primeng教程中创建一个简单的tabmenu，我只想显示它。但我得到了＃34;没有路由器的提供商！＆＃34;例外。这个我们的组件有tabmenu：

<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} )] );

Answer 1

首先，您应该更新（两个项目仍处于开发阶段，路由器最近已更改并增强）到最新的primeng以及相应的受支持的angular2版本到该日期;这意味着：primeng-beta9和angular2-rc3（2016年7月）。

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

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
}

请务必在<base href="/">中添加<head>。

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

p-tabMenu throw＆＃34;没有路由器提供商！＆＃34;例外

1 个答案: