web-dev-qa-db-ja.com

ルーターナビゲートは、同じページの場合ngOnInitを呼び出しません

同じページでいくつかのクエリ文字列パラメータを使用してrouter.navigateを呼び出しています。この場合、ngOnInit()は呼び出しません。それはデフォルトですか、それとも何か追加する必要がありますか？

angularnavigateurlngoninit
52
Jeeten Parmar

ActivatedRouteを挿入して、paramsにサブスクライブできます

constructor(route:ActivatedRoute) {
  route.params.subscribe(val => {
    // put the code from `ngOnInit` here
  });
}

ルーターは、別のルートに移動するときにのみコンポーネントを破棄して再作成します。ルートパラメータまたはクエリパラメータのみが更新され、ルートが同じ場合、コンポーネントは破棄されず、再作成されません。

コンポーネントを強制的に再作成する別の方法は、カスタム再利用戦略を使用することです。 Angular2 router 2.0.0は、同じURLが異なるパラメーターでロードされたときにコンポーネントをリロードしませんか？ （まだ多くの情報が利用可能ではないようです）

85
Günter Zöchbauer

ルーターでreuseStrategyを調整できます。

constructor(private router: Router) {
    // override the route reuse strategy
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
}
62
Pascal

おそらくページの再読み込みが必要ですか？これが私の解決策です：@NgModuleを変更しました（私の場合はapp-routing.module.tsファイル内）：

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})] })
4
Dionis Oros

この問題は、ngOnDestroyを使用してサブスクリプションを終了していないという事実に起因する可能性があります。完了方法は次のとおりです。

  1. 次のrxjsサブスクリプションインポートを取り込みます。 import { Subscription } from 'rxjs/Subscription';

  2. OnDestoryをAngular Core Importに追加します。 import { Component, OnDestroy, OnInit } from '@angular/core';

  3. OnDestoryをエクスポートクラスに追加します。 export class DisplayComponent implements OnInit, OnDestroy {

  4. コンポーネントのサブスクリプションごとに、エクスポートクラスの下にrxjsからSubscriptionの値を持つオブジェクトプロパティを作成します。 myVariable: Subscription;

  5. サブスクリプションの値をMyVariable：Subscriptionsに設定します。 this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});

  6. 次に、ngOninitのすぐ下にngOnDestory（）ライフサイクルフックを配置し、サブスクリプションのサブスクライブ解除ステートメントを挿入します。複数ある場合は、ngOnDestroy() { this.myVariable.unsubscribe(); }を追加してください

1
Steve Klock

NgOnInitは、インスタンスの作成時に1回呼び出されます。同じインスタンスの場合、NgOnInitは再度呼び出されません。呼び出すには、作成したインスタンスを破棄する必要があります。

1
micronyks

NgOnInitにあったコードをngAfterViewInitに移動することを検討してください。後者はルーターナビゲーションで呼び出されるようで、この場合に役立ちます。

0
Manoj Amalraj