Angular2: How to run jQuery initialization scripts on route change?

Question

I have an element in an Angular2 app that loads fine when I refresh the page or go to it initially, but is hidden when I change the route to the parent page. I am using some purchased styles/js and when I searched the element name I found some functions inside of a .ready() call that show the element and adjust its height. I believe the issue is that these init scripts run the first time, but then when I change routes they do not execute. I need these scripts throughout the website and I can't really split them up because they're minified. I tried just popping all the scripts into the bottom of the component's HTML but this did not work (not that I expected it to).

If this isn't enough info I can pastebin the js and the element in question but this seems to me like something that would come up a lot and therefore have an easy, generic fix.

So far my best (horrible) solution is: this.router.events.subscribe((evt) => { if (evt instanceof ResolveStart && this.router.url !== '/home' && evt.url == '/home' && this.router.url !== '/' && this.router.url !== evt.url){ window.location.href = window.location.origin; }}) — Sneaky Beaver
– Sneaky Beaver, Commented Apr 16, 2018 at 1:20
@SneakyBeaver his solution will work for you. Post it as an answer. — Harshal Patil
– Harshal Patil, Commented Apr 17, 2018 at 12:24

elvin · Accepted Answer · 2018-04-16 04:30:36Z

2

This happened to me with a theme that wasn't Angular ready as well, I'm pretty sure that there should be a cleaner way to solve it at this time, but it worked for me at that moment. Load your theme's js library into your main component:

ngAfterViewInit() {
    if (document.getElementById("yourLibUniqueId")) {
        document.getElementById("yourLibUniqueId").remove();
    }

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "lib/yourLib.js";
    s.id = "yourLibUniqueId";
    this.elementRef.nativeElement.appendChild(s);
}

answered Apr 16, 2018 at 4:30

elvin

9772 gold badges9 silver badges27 bronze badges

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

Comments

Anshuman Jaiswal · Accepted Answer · 2018-04-16 02:56:16Z

1

You can use activate method of router-outlet as:

<router-outlet (activate)="onActivate($event)"></router-outlet>

Then in onActivate do whatever you want.

answered Apr 16, 2018 at 2:56

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angular2: How to run jQuery initialization scripts on route change?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related