Question

我正在尝试使用延迟加载的第一个应用程序。我有一个动态更改的内容，当用户单击菜单点时该内容就会更改。让我们以这个为例：

menu.component.html

<ul>
    <li (click)="changeRoute('information')">Information</li>
    <li (click)="changeRoute('personal')">Personal</li>
    <li (click)="changeRoute('blog')">Blog</li>
</ul>

更改路由功能

changeRoute(url) {
    this.router.navigate([url], {skipLocationChange: true});
}

content.component.html

<div id="content">
    <app-information *ngIf="router.url === '/information'"></app-information>
    <app-personal *ngIf="router.url === '/personal'"></app-personal>
    <app-blog *ngIf="router.url === '/blog'"></app-blog>
</div>

我现在的问题是，当我通过{p>

content.component.html

角度要求我也加载app-routing.module.ts，{ path: '', loadChildren: './content/content.module#ContentModule' }和information.component.html，但实际上我只想在用户点击特定菜单时加载它们。

出于完整性考虑：

content.module.ts

personal.component.html

content-routing.module.ts

blog.component.html

如何获得import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ContentRoutingModule } from './content-routing.module'; @NgModule({ declarations: [ ], imports: [ CommonModule, ContentRoutingModule ] }) export class ContentModule { }，import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ContentComponent } from './content.component'; const routes: Routes = [ { path: '', component: ContentComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ContentRoutingModule { }和information的组件最初不是加载/不需要，而是在用户点击该组件的menuItem时获得的？

来自控制台的确切错误消息是：

app-information是一个Angular组件，然后确认它是该模块的一部分

app-personal是Angular组件，然后验证它是否属于此模块

app-blog是Angular组件，然后确认它是该模块的一部分

据我正确理解lazyLoading，将这些组件包含在父组件中是没有意义的，因为它们最初会比-加载，否则我错了吗？我为每个组件都考虑了一个模块，但是那也不起作用。

Answer 1

如果您要延迟加载内容，则需要确保不引用它（如您所见）。为此，您需要使用路由。

因此您需要更改此内容：

<div id="content">
    <app-information *ngIf="router.url === '/information'"></app-information>
    <app-personal *ngIf="router.url === '/personal'"></app-personal>
    <app-blog *ngIf="router.url === '/blog'"></app-blog>
</div>

对此：

<div id="content">
    <router-outlet></router-outlet>
</div>

然后将每个组件路由到该路由器出口。然后，这些组件将成为路由组件，而不是子组件，并且父组件不再需要引用这些组件……允许您进行延迟加载。

然后在内容组件中，设置路由配置，如下所示：

RouterModule.forChild([
  {
    path: 'information',
    component: InformationComponent
  },
  {
    path: 'personal',
    component: PersonalComponent
  },
  {
    path: 'blog',
    component: BlogComponent
  }
])

父组件中的延迟加载子组件

1 个答案: