在Angular 6中,可以通过使用RouteReuseStrategy
来解决在子路由之间导航会重新加载父组件的问题。下面是一个包含代码示例的解决方法:
首先,创建一个自定义的CustomReuseStrategy
类,实现RouteReuseStrategy
接口。在shouldReuseRoute
方法中,我们可以通过判断路由的routeConfig
属性来确定是否复用路由。
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return false;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return false;
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
return null;
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
// 判断是否是子路由
if (future.routeConfig === curr.routeConfig) {
return true;
}
return false;
}
}
接下来,在应用的模块文件(通常是app.module.ts
)中,将CustomReuseStrategy
设置为路由策略。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, RouteReuseStrategy } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomReuseStrategy } from './custom-reuse-strategy';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
// 路由配置
])
],
providers: [
{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
通过以上步骤,子路由之间的导航将不再重新加载父组件。