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

Posted 2023-02-22

【中文标题】网址的角度有多深？ [关闭]

【英文标题】：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

【参考方案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时都重复配置