如何在angular2中使用製表符

-1

我有一個應用程序使用angular2和routes.ts正確設置。在應用程序中，我根據routes.ts中定義的路線設置了導航欄。如何在angular2中使用製表符

在其中一個路由中，我想使用一個不參考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 { 

}

來源

2016-09-26 kimondoe

你能發表一些代碼嗎？你不是指route.ts是什麼意思？ –

我已經發布了一些代碼。當我點擊printJob.component.ts中的printJobTab時，它會創建一個控制檯錯誤：錯誤：無法匹配任何路由：'printJobTab' – kimondoe

爲什麼不使用routerlink？

你有一個路徑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

來源

2016-09-26 08:09:00

這仍然使用路由。 – kimondoe

有沒有一種方法，導航的孩子中的href將參考.ts文件中同一模板下的tab-content類？ – kimondoe

我不確定你的意思。您可以使用ngIf通過導航選項卡顯示/隱藏內容。但路由是最佳實踐。路線有什麼問題？ –

如何在angular2中使用製表符

回答

相關問題