代码之家 › 专栏 › 技术社区 › Lia

即使使用onSameUrlNavigation,url也会更改,但视图不会更改

angular2-routing routing angular

Lia · 技术社区 · 7 年前

这是我的路由配置:

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会更改,但即使使用 onSameUrlNavigation:'reload' 如果我刷新它,新的视图触发器。

我怎样才能解决这个问题?

1 回复 | 直到 7 年前

Guerric P 7 年前

当我试图刷新一个页面时,我遇到了同样的问题,当我点击导航栏上的相关按钮时。

当设置在多个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导航上的组件时,这将非常有用。

如果有帮助,请告诉我。