p-tabMenu 抛出 "No provider for Router!" 异常

Question

美好的一天。我想像 primeng 教程中那样创建一个简单的选项卡菜单，我只想显示它。但是我得到 "No provider for Router!" 异常。这个带有 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} )] );

Answer 1

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

然后，您需要在文件 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

p-tabMenu 抛出 "No provider for Router!" 异常

p-tabMenu throw "No provider for Router!" exception

typescript

primeng

angular