角2ルータイベントは最初に発しませんか？

Question

私はあるコンポーネントから別のコンポーネントにルーティングしています。ルートが完了したら、以前のルートからURLを使用したいと思います。私は、下にあるコードを、ルーティング先のコンポーネントのコンストラクタに入れましたが、最初のルートでは起動しません。最初のルートの後、この関数は毎回起動します。

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

私がペアワイズ機能を削除した場合、最初のルートで起動したように見えますが、以前のルートではなく現在のルートのみが表示されます。

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

私の目標は、新しいコンポーネントがルーティングされたときに以前のルートを取得することです。私はここで間違って何をしていますか？

Answer 1

同じ問題を見つけただけで、その理由がわかりました。サービスがそのルートで注入されなかったため、ルータイベントを購読するサービスは依存性インジェクタによってインスタンス化されませんでした。

サービスは、どこかに注入されるとインスタンス化されたように見えます。

したがって、コード全体（イベントではない）が呼び出された場合は、最初のルートを確認してください。

Answer 2

私はまったく同じシナリオを持ちましたが、子コンポーネントのコンストラクタでpairwiseを使用してNavigationEndをサブスクライブすると、it's too lateが見つかりました。

あなたのルート要素でルータに加入し、次の例のようなサービスを通じてルートデータを共有することができます：

events.service.ts

import { Injectable } from '@angular/core'; 
import { RouteChanged } from '../models/route-changed.model'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class EventsService { 
    public routeChanged = new BehaviorSubject<RouteChanged>({ prevRoute: '/', currentRoute: '/' }); 

    constructor() { 
    } 
} 

app.component.ts（あなたをルートコンポーネント）

... 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit, OnDestroy { 
    private subscriptions = new Subscription(); 

    constructor(private eventsService: EventsService) { 
      this.subscriptions.add(this.router.events 
       .filter(event => event instanceof NavigationEnd) 
       .pairwise() 
       .subscribe(navigationEvents => { 
        const prevPage = <NavigationEnd>navigationEvents[0]; 
        const currentPage = <NavigationEnd>navigationEvents[1]; 
        this.eventsService.routeChanged.next(
         { prevRoute: prevPage.urlAfterRedirects, currentRoute: currentPage.urlAfterRedirects }); 
       })); 
     } 

    ngOnDestroy(): void { 
     this.subscriptions.unsubscribe(); 
    } 

    ... 
} 

あなたのターゲット-route.ts

... 
constructor(private eventsService: EventsService) { 
    this.subscriptions.add(this.eventsService.routeChanged.subscribe((routeChanged) => { 
     // use routeChanged.prevRoute and routeChanged.currentRoute here... 
    })); 
} 

P.S.子コンポーネントがページの読み込み後にサブスクライブする場合は、適切な以前のルートイベントを取得するために、サービス内にBehaviorSubjectまたはReplaySubjectを使用することが重要です。

Answer 3

答えは既に与えられています：NavigationEndイベントは、コンポーネントが登録するときに既に発生しています。私は "Dimitar Tachev"というアイデアが気に入らないので、これらのイベントを対象からプロキシすることで回避策を作成します。 私の場合は、解決策は次のとおりです。

1. 以前と同じようにコンポーネントがNavigationEndイベントを購読するようにします。
2. ngOnInitメソッドの注入されたRouteオブジェクトからコンポーネントを初期状態にロードします。

最後に、別の解決策は、ルート変更イベントへのサブスクリプションをコンポーネントのコンストラクタに移動することです。