在Angular中,路由组件默认情况下不会被更新、销毁和重新加载,因为Angular默认会复用已加载的组件。这是为了提高应用程序的性能。
如果你需要在每次路由导航时重新加载组件,可以使用RouteReuseStrategy
来自定义路由重用策略。以下是一个包含代码示例的解决方法:
首先,创建一个自定义的路由重用策略类,该类实现RouteReuseStrategy
接口:
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 {}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return false;
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
return null;
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return false;
}
}
然后,在你的AppModule
中,将providers
数组中的默认RouteReuseStrategy
替换为自定义的路由重用策略类:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [
{ provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,你的路由组件将在每次导航时重新加载,而不是被复用。