URL的角度可以有多深？

Question

我正在尝试学习angular的布线基础知识，并且正在解决一个奇怪的问题。问题是我不能使用两个以上级别的功能来获取类似“ localhost：4200 / teams / settings / people”的网址。人也是一个模块，因为我的意图是配置其他子组件，例如“家”，“细节”，...我不知道是否可能，但是我已经像'teams'和'settings'一样配置了最后一个模块，但是当我导航到'localhost：4200 / teams / settings / people'时，应用程序将移至根目录。我正在考虑限制子功能，这可能吗？在angular文档中，我没有找到有关此特定案例的任何信息。app-routing.module.ts：

const routes: Routes = [
  {path:'teams',component:TeamsComponent},
  {path:'**',redirectTo:'easynow',pathMatch:'full'}
];

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

app.module.ts：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TeamsModule,
    AppRoutingModule
  ],
  exports:[AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

teams-routing.module.ts：

const routes: Routes = [
  {path:'teams',component:TeamsComponent,children:[
    {path:'settings',component:SettingsComponent}
  ]}
];

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

teams.module.ts：

@NgModule({
  declarations: [TeamsComponent],
  imports: [
    CommonModule,
    SettingsModule,
    TeamsRoutingModule
  ],
  exports:[TeamsRoutingModule]
})
export class TeamsModule { }

setings-routing.module.ts

const routes: Routes = [
  {path:'settings',component:SettingsComponent,children:[
    {path:'people',component:PeopleComponent}
  ]}
];

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

settings.module.ts：

@NgModule({
  declarations: [SettingsComponent],
  imports: [
    CommonModule,
    PeopleModule,
    SettingsRoutingModule
  ],
  exports:[SettingsRoutingModule]
})
export class SettingsModule { }

peope-routing.module.ts：

const routes: Routes = [
  {path:'people',component:PeopleComponent,children:[

  ]}
];

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

people.module.ts：

@NgModule({
  declarations: [PeopleComponent],
  imports: [
    CommonModule,
    PeopleRoutingModule
  ],
  exports:[
    PeopleRoutingModule
  ]
})
export class PeopleModule { }

所有组件看起来像这样：

<p>Component Name</p>
<router-outlet></router-outlet>

这是我的输出（http://localhost:4200/teams/settings）：

Sitename
teams works!

settings works!

[当我尝试导航（http://localhost:4200/teams/settings/people）时，我返回到根组件

Answer 1

您必须重复要在每个模块中添加的路由的完整路径（即从根目录开始）。

要解决您的问题，您必须将settings.routing.module.ts更改为

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TeamsComponent } from '../teams.component';
import { SettingsComponent } from './settings.component';
import { PeopleComponent } from './people/people.component';


const routes: Routes = [
   {path:'teams',component:TeamsComponent,children:[
  {path:'settings',component:SettingsComponent,children:[
    {path:'people',component:PeopleComponent}
  ]}
  ]}
];

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

这里是工作Stackblitz