如何在angular2中使用制表符

Question

我有一个应用程序使用angular2和routes.ts正确设置。 在应用程序中，我根据routes.ts中定义的路线设置了导航栏。

在其中一个路由中，我想使用一个不参考routes.ts 的选项卡，但我希望它引用tab-content类。

当我试图运行我的应用程序时，我得到一个错误，说路由没有在routes.ts中定义。

如何制作引用tab-content类而不是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 o这样的路由可能会工作：

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

在这里你有一个使用lastes Angular版本的工作plunker。

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