Angular2 PreloadingStrategy不工作
我试图了解这个自定义路径预压是如何在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",但是，日志中没有错误或任何内容。我不知道我在这里错过了什么。
回答 2
Stack Overflow用户
发布于 2016-11-04 08: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，并且只有在您导航到模块之后，路由器才会加载该模块。
Stack Overflow用户
发布于 2016-11-04 09:01:33
https://stackoverflow.com/questions/40414366
复制相似问题
腾讯云开发者
