I found an example of a router integration, but I cannot use it because the <code clas

<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" da

I was able to make it work, thanks <a class="user-mention notranslate" data-hovercard-

Routing doubt / Integration with NgxsRouterPlugin? about emitter HOT 3 CLOSED

Polyterative commented on August 18, 2024

Routing doubt / Integration with NgxsRouterPlugin?

from emitter.

Comments (3)

splincode commented on August 18, 2024

import { Receiver } from '@ngxs-labs/emitter-plugin';

@State<string>({
  name:     'router',
  defaults: ''
})
export class RouterState {
   private static router: Router;

  constructor(router: Router) {
    RouterState.router = router;
  }

  @Receiver({ action: Navigate })
  public async static changeRoute(ctx: StateContext<string>, { payload: path }: EmitteAction<Navigate>) {
    await RouterState.router.navigate([path]);
    ctx.setState(path);
  }

}

class Component {
   @Emitter(RouterState.changeRoute) 
   public changeRoute: Emittable<Navigate>;
}

from emitter.

Polyterative commented on August 18, 2024

I was able to make it work, thanks @splincode

Observable implementation

@State<string>({
  name:     'Router',
  defaults: 'YET_TO_ROUTE'
})
export class RouterState {
  
  private static router: Router;
  private static ngZone: NgZone;
  
  @Receiver({type: '[Router] Change path'})
  static changeRoute({setState}: StateContext<string>, {payload}: EmitterAction<string>): Observable<boolean> {
    
    const navigate = () => RouterState.router.navigate([payload]);
    
    const observable = fromPromise(
      RouterState.ngZone.run(navigate)    // ngZone workaround https://github.com/angular/angular/issues/25837
    )
      .pipe(
        take(1), // one-shot
        share()
      );
    
    // this way it fires even if emitted doesn't subscribes
    observable.pipe(
      filter(navigated => navigated) // only if actually navigated
    )
      .subscribe(_ => setState(payload));
    
    return observable;
  }
  
  constructor(injectedRouter: Router, injectedNgZone: NgZone) {
    RouterState.router = injectedRouter;
    RouterState.ngZone = injectedNgZone;
  }
}