web-dev-qa-db-ja.com

Angularのコンポーネントを更新する方法

私はAngularプロジェクトに取り組んでいます。コンポーネントの更新アクションに苦労しています。

ボタンのクリック時にルーターのコンポーネントを更新したいと思います。クリックすると、コンポーネント/ルーターを更新する必要がある更新ボタンがあります。

window.location.reload()とlocation.reload()を試してみましたが、これらの2つは私のニーズに適していません。誰もがそれに気づいたら助けてください。

angularroutescomponentsrefresh
34
Sreehari Ballampalli

以下のようにいくつかの調査とコードの変更を行った後、スクリプトが機能しました。条件を追加しました：

this.router.navigateByUrl('/RefrshComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Your actualComponent"]));
62
Sreehari Ballampalli

this.ngOnInit（）;を使用して、ページ全体をリロードする代わりに同じコンポーネントをリロードします!!

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }   
  }
29
Shinoy Babu

これを必要なコンポーネントのコンストラクターのコードに追加するとうまくいきました。

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

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

ngOnDestroy()のこのmySubscriptionからunsubscribeを確認してください。

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

詳細については、このスレッドを参照してください- https://github.com/angular/angular/issues/13831

17
sankar

幸いなことに、Angular 5.1+を使用している場合、ネイティブサポートが追加されたため、ハックを実装する必要はありません。 RouterModuleオプションでonSameUrlNavigationを 'reload'に設定するだけです：

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

詳細については、こちらをご覧ください： https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

6
Lucian Moldovan

これは、ハックを介して実現できます。いくつかのサンプルコンポーネントに移動してから、リロードするコンポーネントに移動します。

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);
2
Sajeetharan - MSFT

私のアプリケーションにはコンポーネントがあり、すべてのデータはコンポーネントのコンストラクターで呼び出しているAPIから来ています。ページデータを更新するボタンがあります。ボタンをクリックすると、バックエンドにデータを保存し、データを更新します。したがって、コンポーネントをリロード/リフレッシュするには、私の要件に従って、データをリフレッシュするだけです。これも要件である場合は、コンポーネントのコンストラクタで記述された同じコードを使用します。

1
Bh00shan

kdo

// reload page hack methode

Push(uri: string) {
    this.location.replaceState(uri) // force replace and no show change
    await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
    this.location.replaceState(uri) // replace
  }
0
Julien Rousset