网址的角度有多深？ [关闭]答案

【问题标题】：how deep can a url be in angular? [closed]网址的角度有多深？ [关闭]
【发布时间】：2020-06-25 11:00:00
【问题描述】：

我正在尝试学习 Angular 的路由基础知识，但我遇到了一个奇怪的问题。问题是我不能使用超过两个级别的功能来获取像“localhost:4200/teams/settings/people”这样的 url。 People 也是一个模块，因为我的意图是配置其他子组件，例如“home”、“details”、... 我不知道这是否可能，但我已经配置了最后一个模块，就像“团队”和“设置”一样，但是当我导航到“本地主机：4200/团队/设置/人”时，应用程序会转到根位置。我正在考虑对子功能进行限制，这可能吗？在 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 { }

settings-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) 时，我返回到根组件。

编辑 1：

我不太了解路由模块。现在我明白了，当有非懒惰的路由模块使用时，有必要按照我的建议定期重复路径，或者，如果它是懒惰的，只有挂在前一个路由模块上的路径的最后一部分。不过问题解决了。

【问题讨论】：

重新访问Angular Tutorial for Routing 或另一个tutorial。您只需要一个定义了所有路由的 RoutingModule。
我在第一个教程中读到您提到我可以为每个功能模块使用单独的路由器模块，事实上，在那个教程中，危机中心功能采用了这种风格。
如果您从中制作Stackblitz，我会看看。
@DanielHabenicht stackblitz.com/edit/testrouting

标签： angular routes

【解决方案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

为了不每次有人写a neat article时都重复配置

【讨论】：