Running JavaScript code when the route changes in Angular 6

Question

Running JavaScript code when the route changes in Angular 6

Currently, I am in the process of upgrading a website that was originally developed using vanilla JS and JQuery to a new UI built with Angular and typescript. Our site also utilizes piwik for monitoring client activity, and the piwik module was created in pure JS. The issue I am facing is that whenever there is a route change on the site, the piwik script needs to be executed again in order to bind the piwik events to the components. However, since the sites do not refresh, the script is not executed again. What I am looking for is a way to manually trigger the execution of the script from the typescript (potentially using JQuery). All the solutions I have come across involve removing the script from the dom manually and then adding it back, but this method seems like a workaround. Is there a more efficient way to execute the script using webpack/JQuery or any other technology?

javascript jquery angular typescript webpack

Answer 1

Answer №1

The Angular Router comes with a built-in observable stream.

To create a route guard, you can subscribe to the route and trigger your logic when a NavigationEnd event occurs.

constructor(private router: Router) {}

.....

this.router.events
      .subscribe((event) => {
        if (event instanceof NavigationEnd) {
          console.log('NavigationEnd:', event);
        }
      });

If you want to learn more about Router Events, it would be helpful.

If piwiki is in the global scope, you can call it using an InjectionToken.

I'm not very familiar with this package, but something like this could work:

import { InjectionToken } from '@angular/core';
export const PWIKIPLUGIN = new InjectionToken('PWIKIPLUGIN');

Then you can invoke it in your constructor like this:

constructor(@Inject(PWIKIPLUGIN) private pwikiPlugin) {}

This will allow you to call pwikiPlugin.something().

Answer 2

The Angular Router comes with a built-in observable stream.

To create a route guard, you can subscribe to the route and trigger your logic when a NavigationEnd event occurs.

constructor(private router: Router) {}

.....

this.router.events
      .subscribe((event) => {
        if (event instanceof NavigationEnd) {
          console.log('NavigationEnd:', event);
        }
      });

If you want to learn more about Router Events, it would be helpful.

If piwiki is in the global scope, you can call it using an InjectionToken.

I'm not very familiar with this package, but something like this could work:

import { InjectionToken } from '@angular/core';
export const PWIKIPLUGIN = new InjectionToken('PWIKIPLUGIN');

Then you can invoke it in your constructor like this:

constructor(@Inject(PWIKIPLUGIN) private pwikiPlugin) {}

This will allow you to call pwikiPlugin.something().

Running JavaScript code when the route changes in Angular 6

Answer №1

Similar questions

Methods for presenting text from an object array using Angular

Toggling siblings in jQuery when focusing and blurring

Lightbox2 is looking to reposition the caption to the right of the image

Sending a multi-level property object to the controller in a post request

Receiving encoded characters in the response

Encounter a parameter validation error

An argument error in IE 8 caused by an invalid procedure call

Samsung browser encounters an international error

The issue of Storybook webpack failing to load SCSS files persists

Troubleshooting: Vue.js not triggering method after watching object

Unable to populate an array with JSON elements within a for loop triggered by useEffect

Modifying the value of an observable in a component does not automatically activate the subscribe function in a service

Removing the "<!doctype html>" tag from a document using cheerio.js is a simple process that involves

Receiving a form submission via POST method from an external source without redirection

Is my input file in Javascript valid and does it exist? Here's how to check

Using Angular 2: Applying a specific class to a single element with [ngClass]

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

"Time" for creating a date with just the year or the month and year

The scrolling feature is not working in NativeScript's ScrollView component

Using HTML, jQuery, and JSON with an AJAX call to populate two web tables stacked on top of each other