3

再会。我想创建一个简单的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} )] );

4

1 回答 1

3

首先，您应该更新（两个项目仍在开发中，路由器最近已更改和增强）到最新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

于 2016-07-06T15:18:24.400 回答