2017-07-21 8 views
2

私は、router.eventsへのサブスクリプションを行うbreadcrumbsコンポーネントを使用しています。 問題はコンポーネントが初めて読み込まれたときで、サブスクリプションを起動しません。角度2 router.eventsサブスクリプションが実行されない

ngOnInit(): void { 
    console.log("oninit beradcumbs"); 
    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => { 
    this.breadcrumbs = []; 
    let currentRoute = this.route.root, 
    url = ''; 
    do { 
     const childrenRoutes = currentRoute.children; 
     currentRoute = null; 
     childrenRoutes.forEach(route => { 
     if (route.outlet === 'primary') { 
      const routeSnapshot = route.snapshot; 
      url += '/' + routeSnapshot.url.map(segment => segment.path).join('/'); 
      this.breadcrumbs.push({ 
      label: route.snapshot.data, 
      url: url 
      }); 
      currentRoute = route; 
     } 
     }); 
    } while (currentRoute); 
    console.log("Breadcumbs",this.breadcrumbs); 
    }); 
} 

routerLinkプロパティを持つリンクをクリックすると、サブスクリプションから値が送信され、正常に動作します。 私は占いで働い1で私のプロジェクトを比較し、ブレッドクラム・コンポーネントで、ルータの状態は次のようになります。Not working Router

と作業1:Working router

あなたはより多くの情報が必要な場合は、助けるために今私をしてみましょう:) 事前に感謝!

+0

このコードをコンストラクタ内に配置してください。 – Vega

+0

@Vegaはい、うまくいきます!なぜ私は理解していない。私はこのコンポーネントのための他のプロジェクトと同じコードを使用しています –

答えて

5

あなたのコードは、購読によって非同期にデータをロードしています。コンストラクタ()に配置するように提案しました。したがって、OnInit()の前にライフサイクルフックの前に実行され、リンクをクリックする前にデータがロードされます。どちらが正しいか。 Observablesをより詳しく見て、何が起こっているのかをよく理解してください。

+0

ありがとう!私はobservablesについて知っていますが、コンポーネントが共有コンポーネントであり、ブートストラップにインスタンス化されているため、コンポーネントが値を取得する前にrouter.eventsがエミットしている理由について疑問を抱いていました。 –

+0

これは機能しました。ありがとう。 – phegde

+1

まさに私が必要なもの!ありがとう! – Reaction21

関連する問題