即使使用 onSameUrlNavigation，url 也会改变，但视图不会改变

Question

这是我的路线配置：

const routes: Routes = [
    {
        path: "",
        component: ThemeComponent,
        canActivate: [AuthGuard],
        runGuardsAndResolvers: 'always'
        children: [
            {
                path: "",
                component: DefaultComponent,
                children: [

                    {
                    path:"alert-detail/:alertId/:dataCenterLocationId/:deviceId/:parameterId/:methodType/:time/ALERT",
                    component:DashboardComponent,
                    data: { page: 'alert-detail', alertType: 'ALERT' },
                },
                {
                    path:"alert-detail/:alertId/:dataCenterLocationId/:deviceId/:parameterId/:methodType/:time/EVENT",
                    component:DashboardComponent,
                    data: { page: 'alert-detail', alertType: 'EVENT' },
                }
                ]
            },
        ],
    },
    {
        path: 'login',
        component: AuthComponent
    },
    {
        path: 'logout',
        component: LogoutComponent
    },
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
    },
    {
        path: 'index',
        redirectTo: 'dashboard',
        pathMatch: 'full'
    },
    {
        path: "**",
        redirectTo: "404",
        pathMatch: "full"
    }
];

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

当尝试在 2 个事件或 2 个警报之间导航时，url 会发生变化，但即使我使用 onSameUrlNavigation:'reload' 并且如果我刷新它，新的视图触发器也不会发生变化。

我该如何解决这个问题？

Answer 1

我在点击导航栏上的相关按钮时尝试刷新页面时遇到了同样的问题。

在多个 URL 上设置时，即使 URL 不同，Angular 也不会重新加载组件。

所以我用这个类创建了自己的解决方法：

/**
 * 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。

这对于您想要实现的目标可能有点过头了，但每次您想在相同的 URL 导航上刷新组件时它都会很有用。

如果这有帮助，请告诉我。