Question

我正在关注以下博客，以便在angularJs中延迟加载指令 Link

他们做的是在头部添加一个脚本，将src作为指令路径，该路径位于服务器上并制作指令标签，编译并添加

如何在角度4中执行此操作

 {path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }

角度延迟加载就像这样。那路径是静态的

如何动态提供loadchildren的路径

以下是此博客中提到的方式link bt它可能会被弃用。

@RouteConfig([


 { path: '/', component: Home, name: 'home' },
  new AsyncRoute({
    path: '/about',
    loader: () => System.import('./components/about/about').then(m => m.About),
    name: 'about'
  })
])

Answer 1

为此创建一个路由模块，例如

从＆＃39; @ angular / router＆＃39;中导入{RouterModule，Routes};

export const CrisisRoute: Routes = [
    {
        path: '',
        component: RootComponent, // set here your parent component.. which is you put <routoutlet>
        children: [
            {
                path: '',
                redirectTo: '/home',
                pathMatch: 'full'
            },
            {
               path: 'home', 
               component: HomeComponent
            },
        ]
    }
];
export const CricidRoutingModule = RouterModule.forChild(CrisisRoute);

加载您的模块

创建CrisisModule模块文件并将CricidRoutingModule添加到导入中。然后你可以将它加载到路由模块，如

{path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }

Answer 2

import { NgModule } from '@angular/core';
    import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
    import { MarketsComponent } from './base/markets.component';
    import { SportsComponent } from './base/sports.component';

    const appRoutes: Routes = [ 
      { path: '', redirectTo: '/markets', pathMatch: 'full' },
      { path: 'markets', component: MarketsComponent },
      { path: 'sports', component: SportsComponent },
      { path: 'weather', loadChildren: './weather/weather.module#WeatherModule' },
      { path: 'currency', loadChildren: './currency/currency.module#CurrencyModule' } 
    ];

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

    }

这会将模块加载为延迟加载。从我的github回购中试试吧 https://github.com/aryanhussain/loadingInNg

Answer 3

您正在关注过时的博客。随时了解最新资讯。试试this教程。对于延迟加载，请查看here

角度中的LazyLoading组件

3 个答案: