2017-09-22 12 views
7

私のアプリの視覚的なサイトマップを印刷したいと思っています。 router.configなどで現在のルートにアクセスできることを知っています角度2の経路ツリーを印刷する

this.router.config.forEach(route => { 

しかし、私はレイジーロードされた子をロードする解決策を見つけることができません。 Auguryブラウザのアドオンを使用すると、すぐにマップ全体を見ることができます。助言がありますか?あなたは怠惰なロードされたモジュールをロードするまで

+0

私はレイジーロードモジュールのルートをロードできないと思います... –

+0

そのルートツリーがAuguryで印刷されたのを見た前に思ったことがあります:-) – Gatekeeper

+0

「Augury」はいくらかのレイジーロードモジュールをロードします: - | –

答えて

1

前兆でもルートを示していない、あなたはroute example appに行く、とRouterツリーは、あなたが文句を言わない管理者のルートを見つける見て確認することができます。

enter image description here

たときにトリガー、あなたは怠惰なロードされたモジュールがロードされた後に設定を確認したい場合は、以下を使用することができ、

this.router.events.filter(e => e instanceof RouteConfigLoadEnd).subscribe(e => { 
    console.log(this.router.config); 
}); 

RouteConfigLoadEndがイベントを表していると言ってルートが遅延ロードされています。

configが更新されると、遅延モジュールルートに​​という名前のプロパティがあります。

enter image description here

app.component.tsに見て、このPlunker !!をチェックし、私はAppComponentコンストラクタでコードの上に追加されました。 curosityのうち

は、私は彼らがルータツリーを更新する方法前兆コードに探していた、私は、以下のbackend.ts

を見つけ、最後

が通知ngZone.onStableにサブスクライブするためのコードがありますその後、ルートを変更した場合、onMicrotaskEmptyが実行されたとのルートが変更されているかどうそれがチェックされている

サブスクリプションで

もう マイクロタスクはありません、

スニペットは、以下のようparse-modules.tsからで、このことができます

export const parseModulesFromRouter = (router, existingModules: NgModulesRegistry) => { 
    const foundModules = []; 

    const _parse = (config) => { 
    config.forEach(route => { 
     if (route._loadedConfig) { 
     foundModules.push(route._loadedConfig.module ? 
      route._loadedConfig.module.instance : 
      route._loadedConfig.injector.instance); 
     _parse(route._loadedConfig.routes || []); 
     } 
     _parse(route.children || []); 
    }); 
    }; 
...... 
...... 

希望を解析され、ルータツリーが更新されます!

関連する問題