Angular subscription method invoked outside of component's scope

Question

Angular subscription method invoked outside of component's scope

One of the challenges I am facing is having a method that needs to be called in different parts of my component. The method looks like this:

this.updateResults();

This method depends on certain properties of the component. While it works fine when called from template methods, I want it to also work after the queryParams are changed. To achieve this, I added the following code:

  ngOnInit() {
    this.navigationSubscription = this._router.events.subscribe((e: any) => {
      if (e instanceof NavigationEnd) {
        this.updateResults();
      }
    });
  }

The method runs at the expected time, but I noticed that the required properties are null when it is executed.

When I check in the debugger, the component appears as _this instead of this. This might be why this.propertyName is not working as intended.

It seems like the component is out of scope when the method is called. How can I ensure that this method call remains within the scope of the component?

angular typescript angular6

Answer 1

Answer №1

Here is a potential solution that you might find helpful:

ngOnInit() {
    const self = this;
    this.navigationSubscription = this._router.events.subscribe((event: any) => {
        if (event instanceof NavigationEnd) {
            self.updateResults();
        }
    });
}

It's hard to say for sure if scope is causing issues in your scenario, but adopting this method has proven effective for me in the past.

Answer 2

Here is a potential solution that you might find helpful:

ngOnInit() {
    const self = this;
    this.navigationSubscription = this._router.events.subscribe((event: any) => {
        if (event instanceof NavigationEnd) {
            self.updateResults();
        }
    });
}

It's hard to say for sure if scope is causing issues in your scenario, but adopting this method has proven effective for me in the past.

Angular subscription method invoked outside of component's scope

Answer №1

Similar questions

Typescript enhances the functionality of the Express Request body

Tips for using colors to highlight text areas in Angular 7

Enabling Cross-Origin Resource Sharing (CORS) in Laravel and Angular

When using NestJS and Serverless, the error message "handler 'handler' is not a function" may be encountered

Using Generic Types in TypeScript for Conditional Logic

Encountering errors while setting up routes with Browser Router

Utilizing props in React results in the introduction of an array

Show the HTML element once the v-for loop has been completed

Exploring the world of command line testing with Angular2, Typescript, Karma, and Jasmine

The displayed session in the Ionic App component.html is not appearing

The kendo-grid-messages are utilized across all columns

Retrieve new data upon each screen entry

Handling errors within classes in JavaScript/TypeScript

While utilizing Ionic to upload images to a server, I encountered the FileTransferError error code 3

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?

Specifying data type in the fetch method

The process of ordering awaits using an asynchronous method

When attempting to run npm install -g @angular/cli, there are no valid versions found for the undefined package

When utilizing the HTML5 range input type, the value of 'this.value' may not be defined

Bringing @angular/code into a directory that is not within an Angular project