Angular2 detect router change attempt BEFORE route is change

Question

I have lazy loaded components and I want to show preloader when we loading component stuff/thirdparty library etc from server.

How I try to do this: Create component with show/hide loader possibility and I want to show it when someone try to change route (before component loading) ans hide it when component is loaded.

Also I want to avoid including per each component a loader service and manyally hide loader on ngOnInit (for example). Now I try make it on top level (app.js)

But I don't know how, because

First: Don't know how correctly detect attempt to change router and show loader (now i make it very ugly - just fire event when we click on navigation link....and it's bad because when I try to navigate via programming methods - loaders will not be showed). Maybe some way exist for detect changes before router render new component?

I saw: topic 1 topic 2 router.subscribe(path => {/hide loader action/})

not working correctly because
1: it works after component rendering and fires only when all component stuff will be loaded, I want to show loader before loading. 2: when componnet is loaded and we try to navigate between components and return on loaded component - this subscription will be fired immediately. So it's mean that after we returned to a laded component first subscribtion will be fired nad after that - loader will be showed :) and never hidden. I don't know why (because on some component router.next not be fired and unsubscription not will be triggered

there is my code

private showPreloader() { let a; this._loadingService.controlledLoaderShow(); a = this._router.subscribe((val) => { console.log("Hide preloader"); this._loadingService.controlledLoaderHide(); a.unsubscribe(); }, (err) => {console.log(`Error in app.ts showPrealoder ${err}`)}); }

Günter Zöchbauer · Accepted Answer · 2016-05-06 11:00:49Z

0

I haven't tried it for your purpose but I think CanActivate is worth a try. It is called before a route is activated.

For how to pass data to a shared service see https://github.com/angular/angular/issues/4112 (This will or has already been changed in the router of Angulars RC.x versions).

answered May 6, 2016 at 11:00

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Velidan Over a year ago

Hi Gunter! Thanks a lot for your answer, but could you please show some example with CanActivate? Because I saw it and tryed to use it but it's not works for me, maybe I do something wrong. @CanActivate((next, previous) => { console.log(next, previous); }) export MyClass ....... nothing show to me, not current or previous route

Günter Zöchbauer Over a year ago

For what Angular2 version?

Günter Zöchbauer Over a year ago

It should work in beta.x but I wasn't able to figure out how to use it in rc.1

Günter Zöchbauer Over a year ago

plnkr.co/edit/Bim8OGO7oddxBaa26WzR?p=preview (from the discussion in the issue linked in my answer) See src/Parent.ts. They use a workaround to make DI available inside @CanActivate(). This should be improved in rc.1 but as mentioned I haven't yet figured out how to use it here.

Velidan Over a year ago

Thanks for your answer Gunter. I will try to do this. But i still don't understand where we use in is-logged.ts export const isLoggedIn = (to: ComponentInstruction, from: ComponentInstruction, target = ['/Home']) => { this parameters - to and from Locks like those parameters never used

|

Collectives™ on Stack Overflow

Angular2 detect router change attempt BEFORE route is change

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related