遅延読み込みを実装しました。カスタムプリロード戦略を設定しようとしています。
次のURL構造があるとします。
/
/fruit
/fruit/bananas
/fruit/apples
/vegetables
私がヒットした場合/、私はプリロードしたいです/fruit。Angularの例に従って、data: {preload: true}ルート構成を入力し、そのデータをチェックしてロードするカスタムプリロード戦略を実装します。これは正常に機能します。
ただし、プリロードしたくない、/bananasまたは/apples実際にに移動するまでは/fruit。それはできるだけ早くとして、/fruitプリロードされ、プリロード戦略は、より多くの持つモジュール見つかった{preload: true}とプリロードを/bananasし、/applesあまりにも。
親モジュールがナビゲートされた後、プリロードモジュールを延期するクリーンな方法はありますか？
ルートのdataプロパティを使用して、カスタムでスケーラブルなソリューションを実行することになりました。3つのプロパティを作成しました。
preload（ブール値）-trueの場合、Angularがそれを認識したらすぐにプリロードします（のように/fruit）。これはAngularがドキュメントで私たちに与えた基本的な例ですpreloadCheckpoint（列挙型）-各アプリの「チェックポイント」を自分の列挙型で定義します。だから私の質問の例で/fruitは、チェックポイントであり、私はそれに定義しますdata: {preloadCheckpoint: myCheckpointEnum.FRUIT}preloadAfterCheckpoint（列挙型）-特定のチェックポイントに到達するまでプリロードを延期するようにこれを定義します。これをで定義する/bananasと、FRUITチェックポイントのあるルートが定義されるまで、バナナモジュールはロードされません。チェックポイントリストを最新の状態に保つことができるようにルート変更をサブスクライブし、プリロードを試行するたびにそのリストをチェックします。
export class CustomPreloadingStrategy implements PreloadingStrategy {
checkpoints: Set<PreloadCheckpoints> = new Set<PreloadCheckpoints>();
constructor(router: Router, route: ActivatedRoute){
router.events.pipe(
filter(event => event instanceof NavigationEnd),
map(() => route),
map(route => {
while (route.firstChild) route = route.firstChild; //gets the deepest child
return route;
}),
filter(route => route.outlet === 'primary'))
.subscribe((route) => {
if(route.snapshot.data['preloadCheckpoint'] !== undefined){
this.checkpoints.add(route.snapshot.data['preloadCheckpoint']);
}
});
}
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && ( route.data['preload'] || this.checkpoints.has(route.data['preloadAfterCheckpoint']) )){
return load(); //preload this route
} else {
return of(null);
}
}
}
export enum PreloadCheckpoints {
FRUIT
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加