@angular/router#RouteReuseStrategy TypeScript Examples

@NgModule({
  providers: [
    {provide: RouteReuseStrategy, useClass: SimpleReuseStrategy, deps: [DOCUMENT, ScrollService]},
    {provide: NZ_I18N, useValue: zh_CN}
  ],
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(`CoreModule has already been loaded. Import Core modules in the AppModule only.`);
    }
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    HttpClientModule,
    SharedModule.forRoot(),
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({ mode: 'md' }),
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
    }),
    HttpClientModule,
    TranslocoRootModule,
    ErrorReportModule.forRoot(),
  ],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    NgHcaptchaModule.forRoot({
      siteKey: environment.SITE_KEY
    }),
    IonicModule.forRoot()
  ],
  providers: [
    {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

@NgModule({
    declarations: [AppComponent, HomePage],
    imports: [BrowserModule,
        CommonModule,
        HttpClientModule,
        FormsModule,
        IonicModule.forRoot(),
        RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

@NgModule({
  declarations: [
    AppComponent,
    SignInPage,
    UsersPage,
    MessagesPage,
    TabsPage,
    RelativeTimePipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    SharedModule,
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot({ mode: 'md' }),
    AppRoutingModule,
    TranslocoRootModule,
    FormlyModule.forRoot({ extras: { lazyRender: true } }),
    FormlyMaterialModule,
    JoyrideModule.forRoot(),
  ],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
    {
      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
      useValue: { duration: 2500 },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios', backButtonText: '' }), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({ mode: 'ios', backButtonText: '' }),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({ mode: 'ios', backButtonText: '' }),
    AppRoutingModule,
    SuperTabsModule.forRoot(),
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    SQLiteService,
    DetailService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot({
      // toastEnter: customAlertEnter
    }), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule, 
    AngularFireStorageModule,
    AngularFireAuthModule,
    HttpModule,
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig),
  ],
  providers: [
    Keyboard,
    GoogleMaps,
    NativeStorage,
    GooglePlus,
    StatusBar,
    SplashScreen,
    UserService,
    AngularFirestore,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule({
  declarations: [SearchRouterContainerDirective],
  exports: [SearchRouterContainerDirective],
  imports: [
    StoreModule.forFeature(ROUTER_STATE_KEY, routerReducer),
    StoreRouterConnectingModule.forRoot({
      stateKey: ROUTER_STATE_KEY,
      serializer: DefaultRouterStateSerializer,
    }),
    EffectsModule.forFeature([RouterEffects]),
  ],
  providers: [
    RouterFacade,
    {
      provide: RouteReuseStrategy,
      useClass: SearchRouteReuseStrategy,
    },
  ],
})
export class DefaultRouterModule {
  constructor(private routerInit: RouterInitService) {
    this.routerInit.initRoutes()
  }

  static forRoot(
    config: RouterConfigModel
  ): ModuleWithProviders<DefaultRouterModule> {
    return {
      ngModule: DefaultRouterModule,
      providers: [{ provide: ROUTER_CONFIG, useValue: config }],
    }
  }
}

export class SearchRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes = new Map<string, DetachedRouteHandle>()

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.routeConfig.path === ROUTER_ROUTE_SEARCH
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.storedRoutes.set(route.routeConfig.path, handle)
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return (
      !!route.routeConfig && !!this.storedRoutes.get(route.routeConfig.path)
    )
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.storedRoutes.get(route.routeConfig.path)
  }

  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    return future.routeConfig === curr.routeConfig
  }
}

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        SharedModule,
        FontAwesomeModule,
        HttpClientModule,
        IonicStorageModule.forRoot({
            name: '_coradar',
            driverOrder: ['indexeddb', 'sqlite', 'websql']
        }),
    ],
    providers: [
        StatusBar,
        SplashScreen,
        BluetoothLE,
        BLE,
        File,
        BackgroundMode,
        BluetoothSerial,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
        PushService,
        DatabaseService,
        Device,
        UniqueDeviceID
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

providers: Provider[] = [
  AppVersion,
  Keyboard,
  ScreenOrientation,
  SplashScreen,
  StatusBar,
  FirebaseX,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  // { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy },
  //{ provide: TranslateModule, deps: [TranslationsLoader.loadAllModulesAndMerge("")]}
]

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        AngularFireModule.initializeApp(environment.firebase),
        AngularFirestoreModule,
        AngularFireAuthModule
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
        SQLite,
        BluetoothLE,
        DatePipe,
        FirebaseAuthentication
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

/* eslint-disable @typescript-eslint/no-unused-vars */

/**
 * Implements RouteReuseStrategy to customize route reuse.
 */
export class AemPageRouteReuseStrategy implements RouteReuseStrategy {
  /** Determines if this route (and its subtree) should be detached to be reused later. */
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  /** Not storing deteached route. */
  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void { /* void */ }

  /** Determines if this route (and its subtree) should be reattached. */
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  /** Retrieves the previously stored route. */
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  /** Determines if a route should be reused */
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }
}

@NgModule({
	declarations: [
		AppComponent,
		GlobalFooterComponent,
		AvatarComponent,
		GlobalHeaderComponent,
		SettingsComponent,
		GameComponent,
	],
	entryComponents: [],
	imports: [
		Ng2FittextModule,
		BrowserModule,
		IonicModule.forRoot(),
		AppRoutingModule,
		IonicStorageModule.forRoot(),
		ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
		FormsModule,
	],
	providers: [
		StatusBar,
		SplashScreen,
		BackgroundMode,
		AppCenterCrashes,
		AppCenterAnalytics,
		{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
		AndroidPermissions,
		Platform,
	],
	bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient],
      }
    }),
    CoreModule,
    SharedModule,
    LottieModule.forRoot({ player: playerFactory }),
    ReactiveFormsModule,
    FormlyModule.forRoot(),
    FormlyIonicModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

/**
 * This makes each route with the 'reuse' data flag persist when not in focus.
 */
@Injectable()
export class TabPersistStrategy extends RouteReuseStrategy {
  private handles: { [path: string]: DetachedRouteHandle } = {}

  shouldDetach(route: ActivatedRouteSnapshot) {
    return route.data.shouldReuse || false
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) {
    if (route.data.shouldReuse) {
      this.handles[route.routeConfig.path] = handle
    }
  }
  shouldAttach(route: ActivatedRouteSnapshot) {
    return !!route.routeConfig && !!this.handles[route.routeConfig.path]
  }
  retrieve(route: ActivatedRouteSnapshot) {
    if (!route.routeConfig) return null
    return this.handles[route.routeConfig.path]
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot) {
    return future.data.shouldReuse || false
  }
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    GoogleMapsModule,
    SharedModule,
    HammerModule,
    HttpClientJsonpModule,
    SharedModule,
    HammerModule,
  ],
  providers: [
    GooglePlus,
    InAppBrowser,
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig,
    },
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpConfigInterceptor,
      multi: true,
    },
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: false,
      }),
    },
    CurrencyPipe,
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (configService: ConfigService) => () => configService.loadConfigurationData(),
      deps: [ConfigService, RouterAuthService, TokenService, SecureStorageService, StorageService, Sentry.TraceService],
      multi: true,
    },
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
    {
      provide: MIN_SCREEN_WIDTH,
      useValue: 375,
    },
    TitleCasePipe,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
    RtcComponent,
    NotificationComponent,
  ],
  imports: [
    RippleModule,
    SharedModule,
    ActiveClassModule,
    OverlayModule,
    BrowserAnimationsModule,
    BrowserModule,
    HammerModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    IonicModule.forRoot({
      mode: 'ios',
      backButtonText: '',
      backButtonIcon: 'chevron-back-outline'
    }),
    SocketioModule.forRoot({
      url: '',
      options: {
        path: environment.socketioPath,
        autoConnect: false,
        transports: ['websocket'] // 只使用WebSocket连接
      }
    }),
    QuillModule.forRoot({
      placeholder: '在此处插入文字…'
    }),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerImmediately'
    })
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'zh-Hans' },
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: GlobalErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: TabPersistStrategy },
  ]
})
export class AppRoutingModule { }

/*路由复用*/
// 参考https://zhuanlan.zhihu.com/p/29823560
// https://blog.csdn.net/weixin_30561425/article/details/96985967?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
export class SimpleReuseStrategy implements RouteReuseStrategy {

  // 缓存每个component的map
  static handlers: { [key: string]: NzSafeAny } = {};
  // 缓存每个页面的scroll位置,为啥不放在handlers里面呢,因为路由离开时路由复用导致以当前页为key为null了
  static scrollHandlers: { [key: string]: NzSafeAny } = {};

  public static waitDelete: string | null;

  public static deleteRouteSnapshot(key: string): void {
    if (SimpleReuseStrategy.handlers[key]) {
      if (SimpleReuseStrategy.handlers[key].componentRef) {
        SimpleReuseStrategy.handlers[key].componentRef.destroy();
      }
      delete SimpleReuseStrategy.handlers[key];
      delete SimpleReuseStrategy.scrollHandlers[key];
    }
  }


  constructor(@Inject(DOCUMENT) private doc: Document, private scrollService: ScrollService) {
  }


  getKey(route: ActivatedRouteSnapshot): string {
    return route.data['newTab'] === 'true' ?
      route.data['key'] + JSON.stringify(route.queryParams) :
      route.data['key'];
  }

  // 是否允许复用路由
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.data['shouldDetach'] !== 'no';
  }

  // 当路由离开时会触发，存储路由
  store(route: ActivatedRouteSnapshot, handle: NzSafeAny): void {
    if (route.data['shouldDetach'] === 'no') {
      return;
    }
    const key = this.getKey(route);
    if (SimpleReuseStrategy.waitDelete === key) {
      // 如果待删除是当前路由则不存储快照
      this.runHook('_onReuseDestroy', handle.componentRef);
      handle.componentRef.destroy();
      SimpleReuseStrategy.waitDelete = null;
      delete SimpleReuseStrategy.scrollHandlers[key]
      return;
    }

    // 离开路由的时候缓存当前页面的scroll位置
    // 默认都需要keepScroll，如果不需要keepScroll才添加noNeedKeepScroll:no属性
    const innerScrollContainer = [];
    if (route.data['needKeepScroll'] !== 'no') {
      const scrollContain = route.data['scrollContain'] ?? [];
      scrollContain.forEach((item: string) => {
        const el = this.doc.querySelector(item)!;
        if (el) {
          const postion = this.scrollService.getScrollPosition(el);
          innerScrollContainer.push({[item]: postion});
        }
      })
      innerScrollContainer.push({'window': this.scrollService.getScrollPosition()});
    }

    SimpleReuseStrategy.scrollHandlers[key] = {scroll: innerScrollContainer};
    SimpleReuseStrategy.handlers[key] = handle;

    if (handle && handle.componentRef) {
      this.runHook('_onReuseDestroy', handle.componentRef);
    }
  }

  //  是否允许还原路由
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const key = this.getKey(route);
    return !!key && !!SimpleReuseStrategy.handlers[key];
  }


  // 获取存储路由
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    const key = this.getKey(route);
    return !key ? null : SimpleReuseStrategy.handlers[key];
  }

  // 进入路由触发，是否同一路由时复用路由
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    const futureKey = this.getKey(future);
    const currKey = this.getKey(curr);
    if (!!futureKey && SimpleReuseStrategy.handlers[futureKey]) {
      this.runHook('_onReuseInit', SimpleReuseStrategy.handlers[futureKey].componentRef);
    }
    // 在这里记住是否复用路由的结果，因为下面要改变future的路由
    const result = futureKey === currKey;
    // 懒加载读取不到data，通过此方法下钻到最下一级路由
    while (future.firstChild) {
      future = future.firstChild;
    }
    // 重新获取是因为future在上面while循环中已经变了
    const scrollFutureKey = this.getKey(future);
    if (SimpleReuseStrategy.scrollHandlers[scrollFutureKey]) {
      if (scrollFutureKey) {
        SimpleReuseStrategy.scrollHandlers[scrollFutureKey].scroll.forEach((elOptionItem: { [key: string]: [number, number] }) => {
          Object.keys(elOptionItem).forEach(element => {
            setTimeout(() => {
              this.scrollService.scrollToPosition(this.doc.querySelector(element), elOptionItem[element])
            }, 1)
          })
        })
      }

    }
    return result;
  }

  runHook(method: ReuseHookTypes, comp: ReuseComponentRef): void {
    const compThis = comp.instance;
    if (comp == null || !compThis) {
      return;
    }
    const fn = compThis[method];
    if (typeof fn !== 'function') {
      return;
    }
    (fn as () => void).call(compThis);
  }
}