url会更改，但即使使用onSameUrlNavigation，视图也不会更改。
url会更改，但即使使用onSameUrlNavigation，视图也不会更改。
提问于 2018-08-05 18:01:28
这是我的路由配置：
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'，如果我刷新它，也会触发新的视图。
我该如何解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-05 18:39:42
我也遇到过同样的问题，当我试图刷新一个页面时，点击导航栏上的相关按钮。
当在多个URL上设置时，Angular不会重新加载组件，即使这些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导航上的组件时，它都会很有用。
如果这有帮助，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51693318
复制相关文章
相似问题
腾讯云开发者
