2016-07-05 1 views
3

안녕하세요. primeng의 튜토리얼처럼 간단한 탭 메뉴를 만들고 싶습니다. 그냥 표시하고 싶습니다. 하지만 "라우터가 필요하지 않습니다!"라는 메시지가 나타납니다. 예외. tabmenu와 이 우리 구성 요소 : bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, AUTH_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);p-tabMenu throw "라우터에 대한 공급자 없음!" 예외

+0

어떤 버전의 Angular2를 사용하십니까? 최신 버전에서 라우팅과 관련된 몇 가지 변경 사항이있었습니다. –

+0

@ThierryTemplier 버전은 2.0.0-rc.1입니다. – Amelina

답변

3

먼저 업데이트해야 primeng 최근에 (두 프로젝트 개발 및 라우터에 여전히 변화와 최근 강화 된) :

<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 선언 지원되는 angular2 버전을 날짜로 지원합니다. 즉, primeng-beta9angular2-rc3 (7 월/2016)입니다. boot.ts에 추가 한 후

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

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
]; 

과 :

그런 다음, 당신이 파일 app.routes.ts에서는, RouterConfig를 만들 필요가

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

+0

좋은 답변입니다! 한 가지는 ""를 추가하거나 부트 스트랩에 "(APP_BASE_HREF, {useValue : '/'}) 제공"을 추가 할 수 있습니다. 또한 라이브러리 업데이트에주의하고 문서를 읽고 프로젝트가 손상되지 않았는지 확인하십시오. 여기에 데모를 남겨 둘 것입니다. http://plnkr.co/edit/zQ43rV?p=preview :) –