要取消加载路由组件,可以使用Angular的RouteReuseStrategy
接口和DetachedRouteHandle
类。
首先,创建一个实现了RouteReuseStrategy
接口的自定义策略类,例如CustomRouteReuseStrategy
:
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return false; // 取消组件卸载后的缓存
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
// 不需要实现,因为shouldDetach返回了false
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return false; // 取消加载组件缓存
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
return null; // 不从缓存中获取组件
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return false; // 取消路由重用
}
}
然后,在你的AppModule
中使用这个自定义的路由重用策略:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomRouteReuseStrategy } from './custom-route-reuse.strategy';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, RouterModule.forRoot([])],
providers: [{ provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,Angular将不再缓存或重用路由组件,每次加载路由组件时都会重新创建和销毁组件。
下一篇:Angular解析器未解析?