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

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

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

私は試しましたがwindow.location.reload()、location.reload()これら2つは私のニーズには適していません。誰かがそれを知っているなら助けてください。

以下のようにコードを調査して変更した後、スクリプトは機能しました。条件を追加しました：

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
}); 

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

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

        this.ngOnInit();

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

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

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;
  }
});

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

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

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

幸い、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をご覧ください。

これは箱から出して少しだけで、これがあなたに役立つかどうかはわかりませんが、試してみました

this.ngOnInit();

その関数なので、そこにあるコードはすべて、更新のように呼び出されます。

これを行うだけです:(角度9の場合）

import { Inject } from '@angular/core';    
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document){ }

someMethode(){ this.document.location.reload(); }

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

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

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

明示的なルートなしのもう1つの方法：

async reload(url: string): Promise<boolean> {
  await this.router.navigateByUrl('.', { skipLocationChange: true });
  return this.router.navigateByUrl(url);
}

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
  }

constructor(private router:Router, private route:ActivatedRoute ) { 
}

onReload(){
 this.router.navigate(['/servers'],{relativeTo:this.route})
}

htmlファイル

<a (click)= "getcoursedetails(obj.Id)" routerLinkActive="active" class="btn btn-danger">Read more...</a>

tsファイル

  getcoursedetails(id)
  { 
  this._route.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this._route.navigate(["course",id]);
  }); 

このようにAngular2でページを更新する（難しい方法）他の方法は、 f5のようになります

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}