3

良い一日。プライムのチュートリアルのような簡単なタブメニューを作りたいのですが、それを表示したいだけです。しかし、「Router のプロバイダーがありません!」というメッセージが表示されます。例外。これは、タブメニューを備えた私たちのコンポーネントです：

<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 に答える