时间戳

首页 > 解决方案 > 关于不使用 Lazyload Routing 按 Angular 加载组件

javascript - 关于不使用 Lazyload Routing 按 Angular 加载组件

问题描述

我在我们的应用程序中使用延迟加载路由！我面临以下奇怪的问题

我在 TopModule 和 DashboardModule 旁边有 AppModule ，所有这些都加载到lazyload中

如果有人打开 localhost:4200/dashboard 然后它会按 Appmodule、Topmodule DashboardModule 和 TopComponent 的顺序加载

但它应该按 Appmodule、Topmodule、TopComponent 和 DashboardModule 的顺序加载

由于仪表板模块在 TopComponent 之前加载，因此我的页面被卡住了！

注意：我在所有定义路由的模块中都使用过！

我的代码如下

app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { BrowserModule } from "@angular/platform-browser";

 const appRoutes: Routes = [     
   {
      path: '',
      loadChildren: './top.module#TopModule',
   }     
 ];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes)      
  ],
  providers: [],
  entryComponents: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

app.component.html

<router-outlet></router-outlet>

顶部模块.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes} from '@angular/router';
import { TopComponent } from './top.component';
import { BrowserModule } from "@angular/platform-browser";

const appRoutes: Routes = [
{
    path: '',
    component: TopComponent,
    children: [
        {
            path: '',
            loadChildren: './first.module#FirstModule',
        },
        {
            path: 'dashboard',
            loadChildren: './dashboard.module#DashboardModule',

        },
    ]
}
]

@NgModule({
  declarations: [
    TopComponent         
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forChild(appRoutes)
  ],
  providers: [],
  entryComponents: [],
})

export class TopModule {
}

top.component.html

<router-outlet></router-outlet>

标签： javascriptangular

解决方案

首先，正如您在上面的评论中所说，如果 TopComponent 应该出现在所有视图中，那么懒惰地加载它是没有意义的。您应该将 TopModule 添加到您的 AppModule 中，因为无论用户输入什么 url，他们都会得到它。

接下来，要加载FirstModule和DashboardModule懒惰，您可以按以下方式进行：

const appRoutes: Routes = [
{
    path: '',
    component: OutletComponent,
    children: [
        {
            path: '',
            loadChildren: './first.module#FirstModule',
        },
        {
            path: 'dashboard',
            loadChildren: './dashboard.module#DashboardModule',
        },
    ]
}]

最后为子路由创建一个组件：

//OutletComponent

@Component({
    selector: 'outlet-component',
    template: `<router-outlet></router-outlet>`,
})
export class OutletComponent {}

推荐阅读