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不同，Angular也不会在多个URL上重新加载组件。

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

<input type="text" class="form-control" id="myname" required [(ngModel)]="customer.name" name="myname">

AppInjector引用此：

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

}

在您的AppModule中：

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;
    }
}

然后使所有需要的组件扩展import { setAppInjector } from './app.injector'; // ... export class AppModule { constructor(private injector: Injector) { setAppInjector(injector); } }。

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

让我知道这是否有帮助。

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

1 个答案: