onRouterReuse implementation

[ritox842]

I've reverted you latest change with the new lifecycle hooks and propose my own approach.

[gili-lumigo]

handle type isn't implemented correctly so I'm wrapping it in @ts-ignore.

[benjamin-thomas]

Interesting. I'm curious as to how you found this private API (via debugger?)

I can only access the public API with my IDE (IntelliJ points me to d.ts files)

If you have tips to get access the underlying Angular code I'm all ears :)

[ritox842]

I'm just familiar with bind-query-param repo... You can see it with debuggers or just look into its source code...

Of course that this is just a POC... You need to open a detailed issue for bind-query-param repo explaining the issue and asking for making it public (Calling it directly won't work for controls that uses a special URL parser...)

[benjamin-thomas]

Got ya, thanks :)

[gili-lumigo]

Added a callback function named onRouterReuse that it been called every time the route is reused.
We also use router.events because we can't change the urlParams before the route completes, Otherwise it mess the route change.

Then I call a private function updateQueryParams with the form value.
We might need ti change this method to be public in bind-query-param repo.

[benjamin-thomas]

Nice I like it! It'd be great if a default implementation could be provided somehow (to reduce the boilerplate later)

 onRouterReuse(): void {
    this.router.events.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd),
      take(1))
      .subscribe(() => {
        // yield here, code specific to a component
      })
  }

I'm not sure how to go about this. The closest I got was this ugly thing:

// OnRouterReuseImpl.ts
export class OnRouterReuseImpl {
  fn?: () => void;
  constructor(private router: Router) {
  }

  onRouterReuse(): void {
    this.router.events.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd),
      take(1))
      .subscribe(() => {
        if (this.fn) {
          this.fn();
        }
      })
  }

}

// my-form.component.ts
private routeReuse: OnRouterReuseImpl;
constructor(private factory: BindQueryParamsFactory,
            private router: Router) {
    this.routeReuse = new OnRouterReuseImpl(router);
    this.routeReuse.fn = () => {
      // @ts-ignore
      this.manager.updateQueryParams(this.form.value);
    }
  }

  onRouterReuse(): void {
    this.routeReuse.onRouterReuse();
  }

[ritox842]

Unfortunately, I didn't manage to add Router to app-route-reuse-strategy.ts because of circular dependencies...
I think that this whole function should be inside bind-query-param repo so you won't repeat yourself, Or just keep it as you did with some kind of common service that handles it.

[benjamin-thomas]

👍

I’m finding using a custom route reuse strategy quite tricky in practice.

And having two events (attached/detached) seems to be quite useful for the app I’m working on.

Thanks for your input though, I’ll have to think it some more :)