Angular で現在のページを更新するにはどうすればよいですか?手法の紹介

この記事では、現在のページを更新するための Angular メソッドをいくつか紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

現在のページを更新する Angular のいくつかのメソッド

---

デフォルトでは、現在の URL に移動するリクエストがあったときを受信して​​も、Angular ルーターはそれを無視します。

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

同じリンクを繰り返しクリックしても、ページは更新されません。

onSameUrlNavigation 属性は、ルートのリロードをサポートするために Angular 5.1 から提供されています。

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

onSameUrlNavigation には、「reload」と「ignore」という 2 つのオプション値があります。デフォルトは「ignore」です。ただし、onSameUrlNavigation を 'reload' に変更するだけでは RouterEvent イベントがトリガーされるだけで、ページはリロードされません。他のメソッドを使用する必要があります。続行する前に、ルーター トレースを有効にし、ブラウザ コンソールからルーティング イベント ログを確認します:

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

onSameUrlNavigation が構成されていない場合、同じリンクを再度クリックしてもログが出力されないことがわかります。onSameUrlNavigation を ' として構成します。 reload ' を実行すると、NavigationStart、RoutesRecognized、GuardsCheckStart、GuardsCheckEnd、ActivationEnd、NavigationEnd などのイベントを含むログが出力されます。

関連チュートリアルの推奨事項: "angular チュートリアル"

以下では、現在のページを更新するいくつかの方法を紹介します:

NavigationEnd

##1. onSameUrlNavigation を「reload」として設定します

2. NavigationEnd イベントをリッスンします

Router イベントをサブスクライブし、NavigationEnd でデータをリロードし、破棄しますコンポーネント Unsubscribe:

export class HeroesComponent implements OnDestroy {
  heroes: Hero[];
  navigationSubscription;

  constructor(private heroService: HeroService, private router: Router) {
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.init();
      }
    });
  }

  init() {
    this.getHeroes();
  }

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

このメソッドでは、必要に応じてページが更新されるように構成できますが、コードは煩雑です。

RouteReuseStrategy

1. onSameUrlNavigation を「reload」に設定します

2. RouteReuseStrategy をカスタマイズし、Route を再利用しません

実装方法は 2 つあります:

コード内の戦略を変更します:

constructor(private heroService: HeroService, private router: Router) {
  this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };
}

Angular は Router をシングルトン オブジェクトとして適用するため、この方法を使用すると、1 つのコンポーネントで戦略を変更すると他のコンポーネントに影響します。ただし、ルーターはブラウザからページを更新した後に再初期化されるため、混乱を招きやすいためお勧めできません。

カスタマイズされた RouteReuseStrategy:

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }

}

カスタム RouteReuseStrategy を使用する:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
  providers: [
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
  ]
})

このメソッドは、より複雑なルート再利用戦略を実装できます。

Resolve

Resolve を使用すると、ルートがアクティブ化される前にデータを準備できるように、事前にサーバーからデータを取得できます。

1. ResolverService の実装

コンポーネント内の初期化コードを Resolve に転送します:

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';

import {HeroService} from '../hero.service';
import {Hero} from '../hero';

@Injectable({
  providedIn: 'root',
})
export class HeroesResolverService implements Resolve<Hero[]> {
  constructor(private heroService: HeroService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero[]> | Observable<never> {
    return this.heroService.getHeroes();
  }
}

ルーティング用のリゾルバーを構成します:

path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}

2. コンポーネントを変更しますコードを、resolve

constructor(private heroService: HeroService, private route: ActivatedRoute) {
}

ngOnInit() {  this.route.data.subscribe((data: { heroes: Hero[] }) => {    this.heroes = data.heroes;
  });
}

3 からデータを取得するように変更します。 onSameUrlNavigation を「reload」として設定します。

4. runGuardsAndResolvers を「always」として設定します。

runGuardsAndResolversオプションの値: 'paramsChange'、'paramsOrQueryParamsChange'、'always'

{path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}, runGuardsAndResolvers: 'always'}

タイム スタンプ

ルーターに時間パラメータを追加します:

<a (click)="gotoHeroes()">Heroes</a>

constructor(private router: Router) {
}

gotoHeroes() {  this.router.navigate(['/heroes'], {    queryParams: {refresh: new Date().getTime()}
  });
}

次に、コンポーネント内の queryParamMap をサブスクライブします:

constructor(private heroService: HeroService, private route: ActivatedRoute) {
  this.route.queryParamMap.subscribe(params => {
    if (params.get('refresh')) {
      this.init();
    }
  });
}

プログラミング関連の知識の詳細については、

プログラミング ビデオ を参照してください。 ！

以上がAngular で現在のページを更新するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。