Question

我正在遵循PluralSight上有关 Angular基础知识的课程，创建了一个带有用户模块和事件模块的事件管理站点。（该课程没有将事件管理放入功能模块中，而是由我自己完成的。）我按照说明在顶部使用 loadChildren 让每个模块处理自己的路由。级别路由：

app.routes.ts

package com.togise

import com.togise.hello.Hello
import spock.lang.Specification

class AppTest extends Specification {

    def "application has a greeting"() {
        setup:
        def app = new App()
        Hello hello = new Hello(str: "str")

        when:
        def result = app.greeting

        then:
        result != null
        hello != null
    }

    def "when the variable in the where clause is named with the same name with in some other test in this class but the types are different, the test is trying to cast it to the wrong type"() {
        App app = Mock()

        when:
        new String()

        then:
        app.getGreeting() >> hello

        where:
        hello << ["str"] // matches the name of the variable in the previous test
    }
}

app.module.ts

import { Routes } from '@angular/router';
import { NotFoundComponent } from './utility/not-found.component';

export const appRoutes: Routes = [
  { 
      path: 'events', 
      loadChildren: './events/events.module#EventsModule'
  },
  { path: 'user', loadChildren: './user/user.module#UserModule'},
  { path: 'NotFound', component: NotFoundComponent },
  { path: '', redirectTo: '/events', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

然后，假设我要 / events 显示事件列表， / events / create 以显示用于输入新事件的页面以及 / events / 3 以显示ID = 3的事件的详细信息，我应该具有以下内容。根据课程Angular's own exposition on the subject的证实，我应该仅指定子路径，而忽略“事件”段，该段应该已经由应用程序级路由解决了。

来自 event.routes.ts

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

import { appRoutes } from './app.routes';

import { AppComponent } from './app.component';
import { SharedModule } from './common/shared.module';
import { NavBarComponent } from './nav/navbar.component';
import { EventService } from './events/event.service';
import { ToastrService } from './common/toastr.service';
import { NotFoundComponent } from './utility/not-found.component';
import { UserModule } from './user/user.module';
import { EventsModule } from './events/events.module';


@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    EventsModule,
    UserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    EventService,
    ToastrService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

events.module.ts

export const eventRoutes: Routes = [
    { path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: '', component: EventsListComponent }
];

这不起作用。而是直接显示路径/的事件列表（即https://localhost:4200/，它不会重定向）。它不会路由到/ events，/ events / create或/ events / 3。

当我提供完整的路径，包括我认为我本不该需要的“事件”部分时，然后该应用程序开始工作：

event.routes.ts （版本2）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { eventRoutes } from './event.routes';
import { EventsListComponent } from './event-list/events-list.component';
import { CreateEventComponent } from './create-event/create-event.component';
import { EventThumbnailComponent } from './event-list/event-thumbnail.component';
import { EventDetailsComponent } from './event-details/event-details.component';

@NgModule({
  declarations: [
    EventsListComponent,
    CreateEventComponent,
    EventThumbnailComponent,
    EventDetailsComponent,
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(eventRoutes)
  ]
})
export class EventsModule { }

或者，将子路径嵌套到“事件”的父路径下的 children 属性中也可以：

event.routes.ts （版本3）

export const eventRoutes: Routes = [
    { path: 'events/create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: 'events/:id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: 'events', component: EventsListComponent }
];

无论版本2和3是否有效，我的应用程序级路由文件中都具有带有 loadChildren 属性的路由。该应用程序对此非常满意：

app.routes.ts （版本2）

export const eventRoutes: Routes = [{
  path: 'events', children: [
    { path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: '', component: EventsListComponent }
  ]
}];

基本上， loadChildren 路由被忽略。（同样适用于用户模块。）我不知道为什么。

Answer 1

您要在app.module.ts上导入模块。之所以可以使用“版本2和版本3”，是因为模块已导入您的AppModule中。要使延迟加载正常工作，您需要从EventsModule中删除UserModule和AppModule：

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    SharedModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

此外，在添加新模块进行延迟加载后，您可能还需要重新运行ng serve。

角负载儿童没有做任何事情

1 个答案: