0

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

我有创建导航选项卡的 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 {
}
4

1 回答 1

1

由于 table 是另一个模块，您必须为其创建 separeta 路由：

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

于 2018-10-30T23:22:10.923 回答