Question

我想了解这个custom route preloading在angular2中是如何工作的。但我不能让它在第一时间起作用。

这是我的代码

custom.preloading-strategy.ts

export class CustomPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, fn: () => Observable<any>): Observable<any> {
        console.log("Preloading...");
        return Observable.of(true).delay(1000).flatMap(_ => fn());
    }
}

app.routes.ts

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full',
        data: {
            preload: true
        }
    },
    {
        path: 'home',
        component: HomeComponent,
        data: {
            preload: true
        }
    }
];

export const appRoutingProviders: any[] = [
    CustomPreloadingStrategy
];

export const routeComponents: any[] = [
    HomeComponent
];

export const routing = RouterModule.forRoot(appRoutes, {
    preloadingStrategy: CustomPreloadingStrategy,
    useHash: true
});

app.module.ts

@NgModule({
    bootstrap: [AppComponent],
    providers: [appRoutingProviders, appServices],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
    ],
    declarations: [
        AppComponent,
        SharedComponents,
        appDirectives,
        routeComponents,
        NewsMediaListComponent
    ],
    entryComponents: [AppComponent]
})

DEPS

"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/router": "3.1.2",
"rxjs": "5.0.0-rc.1",

但是，日志中没有错误或任何错误。而且我不知道我在这里失踪了什么。

Answer 1

延迟加载仅适用于模块。

如果您仅在路线中使用HomeComponent作为组件，则此功能无效。您应该为HomeComponent创建自己的模块，而不是使用组件属性，并在路径中使用loadChildren（ app.routing.ts ）：

{
    path: 'home',
    loadChildren: './../home/home.module#HomeModule',
    data: { preload: true }
}

在单独的文件中创建另一个模块（ home.module.ts ）：

import { NgModule, Component } from '@angular/core';
import { HomeComponent } from './home.component';
import { routing } from './home.routing';

@NgModule({
    imports: [
        routing
    ],
    declarations: [
        HomeComponent
    ]
})
export class HomeModule { }

并为此组件创建路由文件（ home.routing.ts ）：

import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

const homeRoutes: Routes = [
    { path: '', component: HomeComponent }
]

export const routing: ModuleWithProviders = RouterModule.forChild(
    homeRoutes
);

data: { preload: true }只能在具有属性loadChildren的路线中使用。您仍然可以为任何其他路由设置data-attribute，但它与延迟加载本身无关。

你应该阅读这篇关于延迟加载模块的写得很好的article of Victor Savkin。

更新回答： 我还看到data: { preload: true }无效，因为您需要在自定义预加载策略中处理此问题，如下所示：

export class SelectedPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, load: Function): Observable<any> {
        return route.data && route.data['preload'] ? load() :  Observable.of(null);
    }
 }

您还需要做的是导出此预加载策略，以便在provider数组中的app.module中使用它：

在 app.routing.ts ：

export const APP_ROUTES_MODULE_PROVIDER = [SelectedPreloadingStrategy];

并将其导入 app.module.ts ：

import { routing, APP_ROUTES_MODULE_PROVIDER } from './app.routing';

到@NgModule - providers-array：

providers: [
    ...
    APP_ROUTES_MODULE_PROVIDER
],

如果everthing正确编译并且您在应用程序中路由到延迟加载的模块，则应检查开发人员工具的Network - 选项卡，您将看到路由器仅在您导航后加载了模块它。

Answer 2

您希望以与预加载所选模块的PreloadAllModules模块策略相同的方式定义策略。因此，您应该在路由中正确使用loadChildren：

export const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        loadChildren: './app/home.module#HomeModule',
        data: {
          preload: true
        }
    }
];

另外，请再次查看Custom Pre-loading以及在here创建自定义预加载策略的示例。

Angular2 PreloadingStrategy无法正常工作

2 个答案: