web-dev-qa-db-ja.com

Angular-ページ全体ではなくコンポーネントのリロードで現在の同じURLに移動します

Angular 5ライブラリ、ページではなくコンポーネント全体をリロード（更新）して現在のURLに移動したい、angularドキュメント。

そして、それは私が必要なものです：

 /**
 * Define what the router should do if it receives a navigation request to the current URL.
 * By default, the router will ignore this navigation. However, this prevents features such
 * as a "refresh" button. Use this option to configure the behavior when navigating to the
 * current URL. Default is 'ignore'.
 */
onSameUrlNavigation: 'reload' | 'ignore';

今、私はonSameUrlNavigationプロパティをreloadに設定してから同じURLに移動しようとしましたが、次のように何も起こりませんでした。

this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['view'], { queryParams: { QueryUUID: selectedId } });

誰でもこれを使用したことがありますか？

angularroutes
5
Ebraheem Alrabee'

Angular 5.1のonSameUrlNavigationプロパティは必要なものではないので、この回避方法を見つけました。

単にshouldReuseRouteをオーバーライドする必要があるため、現在のルートと将来のルートがviewに等しい場合、更新するコンポーネントルートの例外を追加しました。

また、Angular Material sidenav。からナビゲートする場合でも、問題なく他のルートにナビゲートできます。

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
};

更新：

Angular 5.1で新しいonSameUrlNavigationプロパティを使用したい場合は、このブログを参照できます。

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

2
Ebraheem Alrabee'

私があなたを正しく理解している場合、これは私がそれを行う方法です：

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getMovie(id);
        }
    );
}

または、クエリパラメータを監視するには：

ngOnInit(): void {
    this.route.queryParams.subscribe(param => {
        this.pageTitle = 'Movie List';
        this.getMovies();
    });
}

NgOnInitで、パラメーターの変更を監視します。パラメーターが変更されると、データを再取得します。

データはすべてバインドされているため、ページは新しく取得されたデータで「更新」されます。

5
DeborahK

この目的のためにangularルーターイベントを使用できます。

import { takeUntil, filter } from "rxjs/operators";
import { Router, NavigationEnd } from "@angular/router";

this.router.events.pipe(
      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
      takeUntil(this._unsubscribeAll),
).subscribe(() => {
      this.cache = {};
      this.cachedRows = [];
      this.getRollingJobs(this.page);
});
0
casper123

ルートモジュール：各ルート宣言に以下を追加

runGuardsAndResolvers: 'always'

そして

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

例えばcategory/:id

この下の部分はコンポーネントの下にあります

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        // do something with the query params
    });
        this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
}

ルートの変更ごとに、たとえばcategory/11およびcategory/12毎回loadUserDetail関数を呼び出します。

そのため、ページを更新せずに、サーバーからデータを取得し、同じroureParamsでdomを更新します。

0
Swapnil Dalvi

ページ全体のリロードに関しては、通常の<a href="/">Reload Page</a>タグは私にとっては問題なく機能します。 「onSameUrlNavigation」機能を使用してみましたが、ページ全体を思いどおりにリロードしていませんでした。

0
desoga