2016-07-05 3 views
3

Добрый день. Я хочу создать простой tabmenu, как в учебнике primeng, я хочу просто отобразить его. Но я получаю «Нет провайдера для маршрутизатора!» исключение. Это нас компонент с tabmenu:p-tabMenu throw «Нет провайдера для маршрутизатора!» исключение

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

+0

Какую версию Angular2 вы используете? Были внесены некоторые изменения в последние версии, касающиеся маршрутизации ... –

+0

@ThierryTemplier версия 2.0.0-rc.1 – Amelina

ответ

3

Во-первых, вы должны обновить (оба проекта все еще находятся в разработке и маршрутизатора были изменены и усиливается в последнее время) в последнее primeng и соответствующую поддерживаемую версию angular2 на дату; это означает: primeng-beta9 и angular2-rc3 (июль/2016).

Затем вам нужно создать 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

+0

Хороший ответ! Одна вещь, вы можете добавить "" или вы можете добавить "обеспечить (APP_BASE_HREF, {useValue: '/'})" к начальной загрузке. Кроме того, будьте внимательны при обновлении библиотек, прочитайте документы и проверьте, не нарушает ли ваш проект. Я оставлю здесь демо http://plnkr.co/edit/zQ43rV?p=preview :) –

Смежные вопросы