angular2でタブを使用する方法

Question

routes2が正しく設定されているangle2を使用するアプリケーションがあります。 アプリでは、routes.tsに定義されているルートに従ってナビバーが設定されています。

routeの1つでは、routes.ts を参照していないタブを使用したいと思っていますが、代わりにtab-contentクラスを参照してください。

アプリケーションを実行しようとしたとき、routes.tsに経路が定義されていないとのエラーが表示されました。

routes.tsの代わりにタブコンテンツクラスを参照するタブを作成するにはどうすればよいですか？

app.component.tsコード：

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

import { FooterComponent, HEADER_DIRECTIVES, NAVBAR_DIRECTIVES } from 'ui-core/core'; 

import { HomeComponent } from './components/home/home.component'; 
import { PrintJobComponent } from './components/printJob/printJob.component'; 

@Component({ 
    selector: 'app-template', 
    template: ` 
    <cui-header title="Sample App"> 
     <cui-navbar> 
     <cui-navbar-item route="/printJob">Print Job</cui-navbar-item> 
     <cui-navbar-item route="/home">Home</cui-navbar-item> 
     </cui-navbar> 
    </cui-header> 
    <router-outlet></router-outlet> 
    <cui-footer [helpRoutePath]="helpRoutePath"></cui-footer> 
`, 
    directives: [FooterComponent, HEADER_DIRECTIVES, ROUTER_DIRECTIVES, NAVBAR_DIRECTIVES] 
}) 

export class AppComponent { 

} 

routes.ts：

/** 
* angular2 imports 
*/ 
import { RouterConfig, provideRouter } from '@angular/router'; 

/** 
* App Component imports 
*/ 
import { HomeComponent } from './app/components/home/home.component'; 
import { PrintJobComponent } from './app/components/printJob/printJob.component'; 

export const APP_ROUTES: RouterConfig = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'printJob', component: PrintJobComponent }, 
    { path: 'home', component: HomeComponent }, 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(APP_ROUTES) 
]; 

printJob.component.tsコード：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'print-job', 
    template: ` 
    <div class="container-fluid single-col-full-width-container"> 
    <br> 
    <ul class="nav nav-tabs"> 
     <li><a data-toggle="tab" href="#printJobTab">Print Job</a></li> 
     <li><a data-toggle="tab" href="#reprintJobTab">Reprint Job</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div id="printJobTab" class="tab-pane fade"> 
     <p>table for print job here.</p> 
     </div> 
     <div id="reprintJobTab" class="tab-pane fade"> 
     <p>table for reprint job here.</p> 
     </div> 
    </div> 
    </div> 
` 
}) 
export class PrintJobComponent { 

} 

Answer 1

あなたはパスPRINTJOBとルートを持っていますto printJobTab

Sこのようなルーティングはおそらく動作します：

<a [routerLink]="['/printJob']">Print Job</a> 
<a [routerLink]="['/home']">Home</a> 

ここでは、lastes Angularバージョンを使用している作業中のプランカーがあります。

http://plnkr.co/edit/Ppll3PmpCiURmmaRDce8?p=preview