Angular url更改，但即使使用onSameUrlNavigation也不会查看更改

这是我的路线配置：

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'})]

在尝试在两个事件或两个警报之间导航时，url会发生更改，但即使我正在使用ameurlnavigation:'reload'并刷新它，也不会查看更改。新视图会触发

---

如何解决此问题？

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

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

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

/**
 * 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导航上刷新组件时，它都会很有用

---

让我知道这是否有帮助。

你能在stackblitz上创建一个最简单的工作示例吗？另请看：@alt255我使用了RunGuards和Resolver，但没有更改。@alt255我更新了我的问题。我实现了你的解决方案，在我的其他路由中更改了init和destroy调用，但当我在上面更改时，仅更改了inti调用，视图中没有更改，我的意思是销毁没有被调用。它没有解决我的问题，因为我的不同组件结构，但帮助我找到我的问题的原因，谢谢。