问Angular2 PreloadingStrategy不工作
EN

Stack Overflow用户

提问于 2016-11-03 18:27:49

回答 2查看 4.6K关注 0票数 1

我试图了解这个自定义路径预压是如何在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",

但是，日志中没有错误或任何内容。我不知道我在这里错过了什么。

typescript

angular2-routing

angular

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 2

Stack Overflow用户

发布于 2016-11-04 00:08:55

延迟加载只适用于模块。

因此，如果您只在路由中使用HomeComponent作为组件，则这是行不通的。您应该为(app.routing.ts)：创建自己的模块，并在路由HomeComponent中使用loadChildren，而不是组件-属性。

{
    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: { preload: true }不能工作，因为您需要在您的自定义预加载策略中处理这个问题，如下所示：

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

您还需要做的是导出此预加载策略，以便在providers数组中的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-数组：

providers: [
    ...
    APP_ROUTES_MODULE_PROVIDER
],

如果每件事都正确编译，并且您在应用程序中路由到惰性加载模块，那么您应该检查开发人员工具的Network-Tab，并且只有在您导航到模块之后，路由器才会加载该模块。

票数 2

Stack Overflow用户

发布于 2016-11-04 01:01:33

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

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