导航下的角度显示表

Question

我试图根据用户单击的链接简单地显示表格。我已经创建了服务来填充表格和各个表格的导航选项卡。我不太确定一旦用户单击选项卡，如何使该表显示在导航选项卡下。

我有cqi组件，可在其中创建导航选项卡。

我想在导航选项卡下显示lcqi-dy组件（正在生成智能表）。

cqi-component.html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" routerLink="../tables/lcqi-dy">LCQI Weekly</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">VCQI Weekly</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">3GCQI Weekly</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">LCQI Daily</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">VCQI VCQI Daily</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">3GCQI Daily</a>
  </li>
</ul>

cqi组件

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

@Component({
  selector: 'app-cqi',
  templateUrl: './cqi.component.html',
  styleUrls: ['./cqi.component.scss']
})
export class CqiComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

页面路由模块

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CqiComponent } from './cqi/cqi.component';
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';


const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [
    {
      path: 'dashboard',
      component: DashboardComponent,
    }, {
      path: 'cqi',
      component: CqiComponent,
    }, {
      path: 'tables',
      loadChildren: './tables/tables.module#TablesModule',
    },
    {
      path: '',
      redirectTo: 'dashboard',
      pathMatch: 'full',
    }, {
      path: '**',
      component: NotFoundComponent,
    }
  ],
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule {
}

Answer 1

由于表格是另一个模块，因此您必须为其创建分隔线路由：

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { ParentComponent } from './parent.component';

export const tableRoutes: Routes = [
    { path: '', component: ParentComponent }, // path '.../tables'
      children: [
         {path: 'lcqi-dy', component: lcqi-dy-component-name} path '.../tables/lcqi-dy' 
];

export const tableRouting: ModuleWithProviders = RouterModule.forChild(
    tableRoutes,
);

，并且在ParentComponent模板中必须包含<router-outlet>，将在其中渲染路由的子对象。

此外，您还必须在tableRouting中导入TablesModule