Question

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

在其中一条路线中，我想使用一个不引用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和路线到printJobTab

所以这样的路由可能会起作用：

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

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

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

如何在angular2中使用制表符

1 个答案: