角路由无法按预期方式对导入的模块进行

Question

编辑：将forums-routing.module.ts从{ path: '', component: ForumsComponent }更改为{ path: 'forums', component: ForumsComponent }可使路由按预期方式工作，但对我来说为什么我需要指定此名称没有意义。如果此模块要用作完全独立的模块，我希望它直接指向/，而不是/ forums，那么在将其包含为模块时，请在此处选择哪些路由，而不是被迫使用“论坛”

我对棱角还很陌生。我试图在我的应用程序中创建一个子模块，一个论坛模块。我基本上想让路线看起来像这样：

• /
  • 首页
• /论坛
  • 论坛主页（将显示论坛类别）
• / forums /：category
  • 将显示指定类别中的帖子
• / forums /：category / new
  • 将打开将在指定类别中创建的新帖子组件
• / forums /：category /：postId
  • 将在指定类别中打开特定帖子

但是，我的路由以某种方式忽略了我的app-routing.module中的路由，而直接跳到了forums-routing.module中。 （因此localhost /引导我进入论坛，localhost / categoryId引导到该类别详细信息，等等）。我正在按照我在Udemy和他在该课程中创建的应用程序上的“ Angular 2完整指南”中的学习方法进行学习，但是即使看起来我在做所有相同的事情，也还是会出错。

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

app-routing-module：

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

app-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路径从forums继承了路径app-routing。您应该能够使用空路径。但是有多个空路径存在一个问题。到FourmsComponent和CategoryGroupComponent的路由解析为同一路径/forums。您可以执行以下路由操作。

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