web-dev-qa-db-ja.com

アクティブなルートを再読み込み/更新できません

最近、新しいRC3とRouter3alphaに更新しましたが、いくつかの変更が加えられたようです。

アクティブなルートのリンクをクリックしても、コンポーネントがリロードされることはなくなりました。新しいrouter3でこの動作を実現するにはどうすればよいですか？

私のリンクは次のようになります

<a [routerLink]="['/link1']">Link1</a>

そして、テストするために、ngOnInitで乱数を使用しました。

export class LinkoneComponent implements OnInit 
{

    public foo: number;
    constructor() {}

    ngOnInit() 
    {
        this.foo = Math.floor(Math.random() * 100) + 1;
    }

}

ルート間で切り替えを行う場合は正常に機能しますが、現在アクティブなルートをクリックしてもコンポーネントはリロードされません。

angularangular2-routingangular2-router3
27
TommyF

これは現在サポートされていません。パラメータ値のみが変更され、ルートが同じままである場合、コンポーネントは再作成されません。

こちらもご覧ください https://github.com/angular/angular/issues/9811

Paramsをサブスクライブして、paramsが変更されたときに通知を受けて、コンポーネントインスタンスを再初期化できます。

https://stackoverflow.com/a/38560010/217408 も参照してください

15
Günter Zöchbauer

角度2-4現在のルートリロードハック

私にとって、この方法を使用するとうまくいきます：

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

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

このメソッドを現在のコンポーネントのクリックイベントに添付して、リロードすることができます。

6
indreed

Angular 5.1以降、組み込みのAngularルーターの一部としてonSameUrlNavigation構成オプションを使用することで、これを行うことができます。ドキュメントからは明らかではありませんが、セットアップして簡単に始められます。

最初に行う必要があるのは、アプリルーティングが構成されているファイルまたはファイルがある場合、_app.routing.ts_内でオプションを設定することです。

OnSameUrlNavigation _'reload'_またはfalseには2つの値があります。デフォルト値はfalseであり、ルーターがアクティブなルートに移動するように要求されても何も起こりません。この値をreloadに設定します。 reloadは実際にルートをリロードする作業を行わず、フックする必要があるルーターのイベントを再トリガーするだけであることに注意してください。

_@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
})
_

それらのイベントが実際にいつ発生するかを判断するには、ルートでrunGuardsAndResolvers構成オプションを指定する必要があります。これには3つの値を指定できます...

paramsChange-ルートパラメータが変更されたときにのみ起動します。 _/user/:id_のidが変更される場所

paramsOrQueryParamsChange-ルートパラメータが変更されるか、クエリパラメータが変更されると起動します。例えば_/user/:id/invites?limit=10_のidまたはlimitプロパティの変更

always-ルートがナビゲートされたときに常に起動する

この場合、常に指定する必要があります。ルートの例を以下に示します。

_export const routes: Routes = [
  {
    path: 'invites',
    component: InviteComponent,
    children: [
      {
        path: '',
        loadChildren: './pages/invites/invites.module#InvitesModule',
      },
    ],
    canActivate: [AuthenticationGuard],
    runGuardsAndResolvers: 'always',
  }
]
_

これがルーターの構成です。次のステップは、コンポーネントのいずれかでイベントを実際に処理することです。ルーターをコンポーネントにインポートしてから、イベントにフックする必要があります。この例では、ルーターが1つのルートから次のルートへのナビゲーションを完了すると発生するNavigationEndイベントにフックしました。アプリの構成方法により、現在のルートに移動しようとしても、これが起動します。

_export class InviteComponent implements OnInit {
  constructor(
    // ... your declarations here
    private router: Router,
  ) {
    // subscribe to the router events
    this.router.events.subscribe((e: any) => {
      // If it is a NavigationEnd event re-initalise the component
      if (e instanceof NavigationEnd) {
        this.initialiseInvites();
      }
    });
  }

  initialiseInvites() {
    // Set default values and re-fetch any data you need.
  }
}
_

面倒な作業はinitialiseInvites()メソッドに入ります。ここで、プロパティをデフォルト値にリセットし、サービスからデータをフェッチしてコンポーネントを初期状態に戻します。

クリックするとリロードできるようにする各コンポーネントでこのパターンを繰り返すか、何らかの形の更新ボタンで更新する必要があります。ルーティングファイルの各ルートにrunGuardsAndResolversオプションを追加してください。

4
Simon McClive

これは私のために働いた、 this から取った：

_redirectTo(uri) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([uri]));
  }
_

次のように使用できます：this.redirectTo(this.router.url);

3
suhailvs

Angular 2 rc7-router 3.0

Index.htmlのベースURLを<script>document.write('<base href="/" />');</script>に変更します

2
supersonic

これは、この厄介な問題を回避するために思いついた最高のハックです。

_    var currentUrl = this.router.url;
    var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute';
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl));
_

これは機能しますが、まだハックであり、Angularチームがreload()メソッドを提供しなかったことは嫌です

1
Serj Sagan
if (currentUrl.indexOf('/settings') > -1) {
    this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings'));
} else {
    this.router.navigate(['/settings']);
}
0
Muhammad Shahzad Anjum