Question

我正在尝试在我的角度5.2应用程序中重新加载我的导航而没有任何成功。如果参数不变，则角度路由器将忽略我的导航。

我如何导航：

this.router.navigate(['/search', buildParamsFromSearchCriteria(criteria)]);

导航到：

/search;pageSize=20;page=1;orderBy=price;sortDirection=ASCENDING

我的模块配置：

imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules, enableTracing: false, onSameUrlNavigation: 'reload' })],

Answer 1

当单击导航栏上与其相关的按钮时尝试刷新页面时，遇到了相同的问题。

如注释中所述，onSameUrlNavigation仅运行防护程序和解析程序，而不重新初始化组件。有趣的是它还可以触发导航。

因此，我创建了一个对NavigationEnd事件做出反应的抽象类：

/**
 * Abstract class that allows derived components to get refreshed automatically on route change.
 * The actual use case is : a page gets refreshed by navigating on the same URL and we want the rendered components to refresh
 */
export abstract class AutoRefreshingComponent implements OnInit, OnDestroy {
  public routerEventsSubscription: Subscription;
  protected router: Router;

  constructor() { 
    this.router = AppInjector.get(Router);
  }

  /**
   * Initialization behavior. Note that derived classes must not implement OnInit.
   * Use initialize() on derived classes instead.
   */
  ngOnInit() {
    this.initialize();
    this.routerEventsSubscription = this.router.events.filter(x => x instanceof NavigationEnd).subscribe(res => {
      this.initialize();
    });
  }

  /**
   * Destruction behavior. Note that derived classes must not implement OnDestroy.
   * Use destroy() on derived classes instead.
   */
  ngOnDestroy(): void {
    this.routerEventsSubscription.unsubscribe();
    this.destroy();
  }

  /**
   * Function that allows derived components to define an initialization behavior
   */
  abstract initialize(): void;

  /**
   * Function that allows derived components to define a destruction behavior
   */
  abstract destroy(): void;

}

AppInjector引用此：

import {Injector} from '@angular/core';

/**
 * Allows for retrieving singletons using `AppInjector.get(MyService)` (whereas
 * `ReflectiveInjector.resolveAndCreate(MyService)` would create a new instance
 * of the service).
 */
export let AppInjector: Injector;

/**
 * Helper to access the exported {@link AppInjector}, needed as ES6 modules export
 * immutable bindings; see http://2ality.com/2015/07/es6-module-exports.html
 */
export function setAppInjector(injector: Injector) {
    if (AppInjector) {
        // Should not happen
        console.error('Programming error: AppInjector was already set');
    }
    else {
        AppInjector = injector;
    }
}

在AppModule中：

import { setAppInjector } from './app.injector';

// ...

export class AppModule {
  constructor(private injector: Injector) {
    setAppInjector(injector);
  }
}

然后，我将所有需要的组件扩展了AutoRefreshingComponent并实现了所需的功能。

希望这个最新答案会有所帮助。

Answer 2

可以用一种更简单的方法来完成。下面是一个小的示例代码：

在routing.module中：“ /产品/：ID /详细信息”

import { ActivatedRoute, Params, Router } from ‘@angular/router’;

export class ProductDetailsComponent implements OnInit {

    constructor(private route: ActivatedRoute, private router: Router) {
        this.route.params.subscribe(params => {
            this.paramsChange(params.id);
        });

    }

    // Call this method on page load
    ngOnInit() {
    }

    // Call this method on change of the param
    paramsChange(id) {
    }

一般的解释是...为什么要破坏已经存在的组件实例并为相同的情况创建一个新的实例，而这意味着性能下降？这与使用路由模式/ product /：id的行为完全相同，其中也为/ product / 5，/ product / 6，...

保留了相同的组件实例

因此，由于相同的组件实例，您应该基于某个发出的事件（解析器/保护程序）而不是OnInit钩子重新初始化组件。

Answer 3

this.router.navigated =false
work for me  then at ngOnInit just put this below code
this._initise = this.router.events.pipe(
  filter((event: RouterEvent) => event instanceof NavigationEnd),
  takeUntil(this.destroyed)
).subscribe(() => {
  this.router.navigated = false;
  console.log('initialiseInvites')
  this.initialiseInvites();
});

angular 5.2 onSameUrlNavigation无法正常工作

3 个答案: