如何在angular2中使用选项卡

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

在其中一个路由中，我想使用一个不引用routes.ts的选项卡 但是我希望它引用tab内容类

当我试图运行我的应用程序时，我得到一个错误，说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 {

}

 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 {

}

printJob.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 {

}

 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 {

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“打印作业”，
模板：`






这里是打印作业的表

这里的重印作业表

`
})
导出类PrintJobComponent{
}

您有一个路径printJob和路由到printJob选项卡

因此，这样的路由可能会起作用：

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

---

你能发布一些代码吗？你不参考routes.ts是什么意思？我已经发布了一些代码。当我单击printJob.component.ts中的printJobTab时，它创建了一个控制台错误：错误：无法匹配任何路由：“printJobTab”为什么不使用routerlink？已使用routerLink，但仍有错误这仍在使用路由。是否有一种方式，导航选项卡的子项中的href将引用.ts文件中同一模板下的选项卡内容类？我不确定您的意思。您可以通过导航选项卡使用ngIf显示/隐藏内容。但路由是最佳实践。路由怎么了？我只是习惯在引导中使用标签。这更容易。