Question

我有一个仪表板组件，其中包含一个名为SMS的子组件。现在，SMS组件也有它的路由列表。如何在仪表板组件下的短信导航栏下进行路由。以下是截图

Answer 1

角色官方网站有一个工作示例 https://angular.io/docs/ts/latest/guide/ngmodule.html

您需要实施一个＆＃34;功能模块＆＃34;正如文章中所描述的那样。您需要熟悉的概念很少。这里很难描述

请转到英雄模块，答案就在那里。

/ app / hero.component.3.ts

import { Component }   from '@angular/core';
import { HeroService } from './hero.service';
import { UserService } from '../user.service';

@Component({
  template: `
<h2>Heroes of {{userName}}</h2>
<router-outlet></router-outlet>`,
providers: [ HeroService ]
})
export class HeroComponent {
  userName = '';
  constructor(userService: UserService) {
  this.userName = userService.userName;
  }
}

并在hero-routing.module.3.ts

中

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

import { HeroComponent }       from './hero.component.3';
import { HeroListComponent }   from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';

const routes: Routes = [
   { path: '',
component: HeroComponent,
children: [
  { path: '',    component: HeroListComponent },
  { path: ':id', component: HeroDetailComponent }
    ]
  }
    ];

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

Answer 2

import {smsRoutes} from 'yourpath';

export const DashboardRoutes：Routes = [

  {
    path: 'dashboard',

    component: DashboardComponent,
    children: [

        {path:'sms', component: SmsComponent},
        {path:'sms', children: SmsRoutes}


    ]

  }
];

你的SmsRoutes应该是

export const SmsRoutes: Routes =[
                {path: '', redirectTo: 'quicksms',pathMatch: 'full'},
                {path:'quicksms', component:quickSmsComponent}
    ];

这实际上可以在dashboardRoutes中使用，您可以直接使用一个包含子项的路径并且具有默认值＆＃39;＆＃39;到SmsComponent，但我遇到了问题。你甚至可以尝试

路线下的路线角度为2

2 个答案: