onRouterReuse implementation

src/app/app-route-reuse-strategy.ts

@@ -77,6 +77,10 @@ export class AppRouteReuseStrategy implements RouteReuseStrategy {
     if (DEBUG) {
       console.log('%cDEBUG[retrieve]', 'background:green', {path});
     }
+
+    // @ts-ignore
+    handle.componentRef.instance.onRouterReuse()
+
     return handle;
   }
 

src/app/app.component.html

@@ -8,4 +8,4 @@
   </li>
 </ul>
 
-<router-outlet appRouteReuseLifecycle></router-outlet>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -5,25 +5,22 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {MyFormComponent} from './components/my-form.component';
 import {MyListComponent} from './components/my-list.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ReactiveFormsModule} from '@angular/forms';
 import {RouteReuseStrategy} from '@angular/router';
 import {AppRouteReuseStrategy} from './app-route-reuse-strategy';
 import {SpinnerComponent} from './components/spinner.component';
-import {RouteReuseLifeCycleDirective} from './directives/route-reuse-life-cycle.directive';
 
 @NgModule({
   declarations: [
     AppComponent,
     MyFormComponent,
     MyListComponent,
     SpinnerComponent,
-    RouteReuseLifeCycleDirective,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
-    FormsModule,
   ],
   providers: [
     {provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy},

src/app/components/my-form.component.ts

@@ -2,28 +2,21 @@ import {Component, OnDestroy} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {BindQueryParamsFactory} from '@ngneat/bind-query-params';
 import {of} from 'rxjs';
-import {delay, tap} from 'rxjs/operators';
-import {OnAttach} from '../directives/route-reuse-life-cycle.directive';
+import {delay, filter, take, tap} from 'rxjs/operators';
+import {OnRouterReuse} from "../onRouterReuse";
+import {NavigationEnd, Router} from "@angular/router";
 
 @Component({
   template: `
-
     <h2>My form!</h2>
-    <label for="keep-data">
-      Keep form data
-      <input style="display: inline"
-             [(ngModel)]="keepFormData"
-             id="keep-data" type="checkbox">
-    </label>
-
     <h3>Loaded at: {{loadedAt}}</h3>
     <h4>Slow request:
       {{ slowRequest$ | async }}
       <app-spinner *ngIf="showSpinner"></app-spinner>
     </h4>
 
     <p style="font-family: 'Courier New',sans-serif">
-      {{form.value | json}} keep={{ keepFormData }}
+      {{form.value | json}}
     </p>
 
     <form [formGroup]="form" autocomplete="off">
@@ -67,9 +60,8 @@ import {OnAttach} from '../directives/route-reuse-life-cycle.directive';
     `
   ]
 })
-export class MyFormComponent implements OnDestroy, OnAttach {
+export class MyFormComponent implements OnDestroy, OnRouterReuse {
   showSpinner = true;
-  keepFormData = true;
 
   slowRequest$ = of('A SERVER MESSAGE').pipe(
     delay(5000),
@@ -87,23 +79,22 @@ export class MyFormComponent implements OnDestroy, OnAttach {
   ]).connect(this.form);
   loadedAt: number;
 
-  constructor(private factory: BindQueryParamsFactory) {
+  constructor(private factory: BindQueryParamsFactory,
+              private router: Router) {
     this.loadedAt = Date.now();
   }
 
-  ngOnDestroy(): void {
-    this.manager.destroy();
+  onRouterReuse(): void {
+    this.router.events.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+      take(1))
+      .subscribe(() => {
+        // @ts-ignore
+        this.manager.updateQueryParams(this.form.value);
+      })
   }
 
-  onAttach(): void {
-    console.log('ON ATTACH!!', this.form.value);
-    // this.manager.syncAllDefs(); // does not work
-
-    if (this.keepFormData) {
-      this.form.setValue(this.form.value); // forces form<>URL sync
-    } else {
-      this.form.reset(); // Or reset the form
-    }
+  ngOnDestroy(): void {
+    this.manager.destroy();
   }
 
   refreshNav() {

src/app/onRouterReuse.ts

@@ -0,0 +1,3 @@
+export declare interface OnRouterReuse {
+  onRouterReuse: () => void;
+}