web-dev-qa-db-ja.com

angular 2：同じルートでリダイレクトするときに同じコンポーネントを再度リロードする

ルートをナビゲートするために「routerLink」を使用していますが、正常に機能しています。しかし、同じボタンをもう一度クリックすると、そのコンポーネントが再び読み込まれます。しかし、現在、angular2では機能していません。

app.component.html

<ul class="nav navbar-nav navbar-right">
            <li><a [routerLink]="['/events']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">All Events</a></li>
            <li><a [routerLink]="['/events/new']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Create New</a></li>
</ul>

「すべてのイベント」タブをクリックすると、イベントコンポーネントが毎回ロードされます。

Angular2でこのシナリオを達成するには？

angularangular2-templateangular2-formsangular2-directives
6
Er Vipin Sharma

「すべてのイベント」タブをクリックすると、イベントコンポーネントが毎回ロードされます。

これは、angular2で_Not Possible_です。理由は、コンポーネントをロードすると、別のルートからそのルートに再度移動した場合にのみコンポーネントがリロードされるからです。

しかし、あなたは強制的にリロードすることができます

基本的には2つの方法があります

  • 必要に応じてngOnInit()メソッドを何度も呼び出すことができますが、これは推奨される方法ではありません

  • 必要に応じてngOnInit()以降からcommonnメソッドを1つ呼び出すことができます。

    _ngOnInit(){
    this.callingFunction();
}

forLaterUse(){
    this.callingFunction(); 
}
_

別の方法は、パラメータ変更時に同じコンポーネントをロードする場合、コンストラクタでこれを使用できます

_this.route.params.subscribe((params: Params) => {
    console.log(params); 
    this.callingFunction();
    // this will be called every time route changes
    // so you can perform your functionality here

});
_
5
Pardeep Jain

以下のこのgithubリンクには正しい解決策があります https://github.com/angular/angular/issues/13831

ロードするコンポーネントのコンストラクターに以下のコードを配置します

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.router.events.subscribe((evt) => {
  if (evt instanceof NavigationEnd) {
    this.router.navigated = false;
    window.scrollTo(0, 0);
  }
});
4
Anonymous

こちらをご覧ください： angular 2 router で現在のルートをリロードする方法

要約すると-その機能はルーターに組み込まれていません。最適なオプションは、関連するデータを更新または再フェッチするサービスを使用することであり、何か変更があった場合、Angularはビューを自動的に更新します。

誰かがAngularでは不可能だと言ったら、それはほとんど常に真実ではありません。既存のソリューションを使用することは不可能です。 ;-)

1
diopside