Angular 导入模块的路由未按预期工作

Question

编辑：将 forums-routing.module.ts 从 { path: '', component: ForumsComponent } 更改为 { path: 'forums', component: ForumsComponent } 使路由按预期工作，但我不明白为什么我需要指定这个。如果这个模块作为一个完全独立的模块工作，我希望它指向 /，而不是 /forums，然后当将它作为一个模块包含时，选择路由到这里，而不是被迫使用 "forums"

我是 angular 的新手。我正在尝试在我的应用程序中创建一个子模块，一个论坛模块。我基本上想让路线看起来像这样：

/
- 主页
/论坛
- 论坛主页（将显示论坛类别）
/论坛/：类别
- 将显示指定类别中的 posts
/论坛/:category/new
- 将打开一个新的 post 组件，将在指定的类别中制作
/forums/:category/:postId
- 将打开指定类别中的特定 post

然而，不知何故我的路由忽略了我的应用程序中的路由-routing.module，并直接跳到我的论坛-routing.module。（所以 localhost/ 引导我到论坛， localhost/categoryId 引导到该类别的详细信息，等等）。我正在按照我在 "The Complete guide to Angular 2" 中关于 Udemy 和他在该课程中创建的应用程序中学习的方式进行学习，但即使看起来我所做的一切都是一样的，但不知何故却出现了错误。

我觉得好像遗漏了一些小细节...无论如何，我已经像这样设置了我的模块

应用程序路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ForumsComponent } from './forums/forums.component';

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'forums', component: ForumsComponent }
];

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

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { ForumsModule } from './forums/forums.module';
import { HomeComponent } from './home/home.component';


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

论坛路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ForumsComponent } from './forums.component';
import { CategoryDetailComponent } from './categories/category-detail/category-detail.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { NewPostComponent } from './posts/new-post/new-post.component';
import { CategoryGroupComponent } from './categories/category-group/category-group.component';

const forumsRoutes: Routes = [
    { path: '', component: ForumsComponent, children: [
        { path: '', component: CategoryGroupComponent },
        { path: ':category', component: CategoryDetailComponent },
        { path: ':category/new', component: NewPostComponent },
        { path: ':category/:postId', component: PostDetailComponent }
    ]},
];

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

forums.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ForumsComponent } from './forums.component';
import { CategoryGroupComponent } from './categories/category-group/category-group.component';
import { CategoryItemComponent } from './categories/category-item/category-item.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { CategoryDetailComponent } from './categories/category-detail/category-detail.component';
import { PostReplyComponent } from './posts/post-detail/post-reply/post-reply.component';
import { PostItemComponent } from './posts/post-item/post-item.component';
import { NewPostComponent } from './posts/new-post/new-post.component';
import { ForumsRoutingModule } from './forums-routing.module';

@NgModule({
  declarations: [
    ForumsComponent,
    CategoryGroupComponent,
    CategoryItemComponent,
    CategoryDetailComponent,
    PostDetailComponent,
    PostReplyComponent,
    PostItemComponent,
    NewPostComponent
  ],
  imports: [
    CommonModule,
    ForumsRoutingModule
  ]
})
export class ForumsModule { }

app.component:

<div class="content">
  <div class="container-fluid">
    <router-outlet></router-outlet>
  </div>
</div>

最后 forums.component:

<p>
  forums works!
  <router-outlet></router-outlet>
</p>

Answer 1

您的 app-routing.module.ts 应该加载 ForumsModule 而不是 ForumsComponent

应用-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'forums', loadChildren: './forums/forums.module#ForumsModule' }
];

app.module 不需要导入 ForumsModule 因为这将被延迟加载

app.module.ts

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

forums-routing.module.ts 路径从 app-routing 继承路径 forums。您应该能够使用空路径。但是有多个空路径存在问题。 FourmsComponent 和 CategoryGroupComponent 的路由解析为同一路径 /forums。你可以像下面的路由那样做。

论坛-routing.module.ts

const forumsRoutes: Routes = [
    { path: '', component: ForumsComponent, children: [
        { path: 'category', component: CategoryGroupComponent, children: [
            { path: ':category', component: CategoryDetailComponent },
            { path: ':category/new', component: NewPostComponent },
            { path: ':category/:postId', component: PostDetailComponent }
        ]}
    ]},
];

这将为您提供 forums-routing.module.ts

的以下路径

/forums                        (ForumsComponent)
/forums/category               (CategoryGroupComponent)
/forums/category/:id           (CategoryDetailComponent)
/forums/category/:id/new       (NewPostComponent)
/forums/category/:id/:postId   (PostDetailsComponent) <- not sure if this works you'll have to try it.

https://angular.io/guide/lazy-loading-ngmodules

Angular 导入模块的路由未按预期工作

Angular routes not working as expected for imported module

angular-routing

angular

应用-routing.module.ts

app.module.ts

论坛-routing.module.ts