Unleash the full power of Angular Components by enhancing them with injected

Question

Unleash the full power of Angular Components by enhancing them with injected

I am facing a challenge with handling the destruction event of an Angular component in my external module that provides a decorating function. I've run into issues trying to override the ngOnDestroy() method when it includes references to injected services. Is there a workaround or another way to achieve the same result?

Check out this Plnkr for more information: https://plnkr.co/edit/YtczREB91A3t6rJ1uKks (error related to ngOnDestroy() should not occur)

If anyone is interested, here is a working version thanks to @estus's suggestion involving the use of Symbol(): https://plnkr.co/edit/nnxLswhPUGZR3ycBWojg

javascript angular typescript

Answer 1

Answer №1

When using the ngOnDestroy

method and applying a decorator, it's important to note that the wrong context can sometimes be applied to the

originalFunction

in the process.</p>

<pre><code>originalFunction.apply(target, arguments);

In situations involving method/property decorators, the target argument typically refers to the class prototype for instance properties/methods:

export const ON_DESTROY_SYMBOL = Symbol();

export function Decorator() {
  return (target: any, propertyName: string) => {
    target[ON_DESTROY_SYMBOL] = target.ngOnDestroy;
    target.ngOnDestroy = function() {
      this[ON_DESTROY_SYMBOL]();
      console.log('Component destroy event successfully handled!');
    }
  }
}

If the ngOnDestroy method may not always exist but the decorator still needs to be applied, it can instead be implemented as a class decorator where the target refers to the class constructor:

export function Decorator() {
  return (target: any, propertyName: string) => {
    target.prototype[ON_DESTROY_SYMBOL] = target.prototype.ngOnDestroy || () => {};
    target.prototype.ngOnDestroy = function() {
      this[ON_DESTROY_SYMBOL]();
      console.log('Component destroy event successfully handled!');
    }
  }
}

...
Decorator()
Component(...)
class ...

Answer 2

When using the ngOnDestroy

method and applying a decorator, it's important to note that the wrong context can sometimes be applied to the

originalFunction

in the process.</p>

<pre><code>originalFunction.apply(target, arguments);

In situations involving method/property decorators, the target argument typically refers to the class prototype for instance properties/methods:

export const ON_DESTROY_SYMBOL = Symbol();

export function Decorator() {
  return (target: any, propertyName: string) => {
    target[ON_DESTROY_SYMBOL] = target.ngOnDestroy;
    target.ngOnDestroy = function() {
      this[ON_DESTROY_SYMBOL]();
      console.log('Component destroy event successfully handled!');
    }
  }
}

If the ngOnDestroy method may not always exist but the decorator still needs to be applied, it can instead be implemented as a class decorator where the target refers to the class constructor:

export function Decorator() {
  return (target: any, propertyName: string) => {
    target.prototype[ON_DESTROY_SYMBOL] = target.prototype.ngOnDestroy || () => {};
    target.prototype.ngOnDestroy = function() {
      this[ON_DESTROY_SYMBOL]();
      console.log('Component destroy event successfully handled!');
    }
  }
}

...
Decorator()
Component(...)
class ...

Unleash the full power of Angular Components by enhancing them with injected

Answer №1

Similar questions

Is there a way to configure the currency symbols in App.module for GYD (Guyana Dollar) since the Angular Currency Pipe Symbol is not available for it

Using a timer to make Ajax calls twice on a single webpage

Eliminate repeated elements by comparing two sets of data

Encountering the error message "value is not defined" when using a React range slider

How to dynamically reference an input textbox ID using javascript or jquery

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Unable to add new tags in Vue multiselect component

Angular 11 issue: Unable to display image on the webpage

Tips for managing nested data in Angular 4 using a Bootstrap 4 data-table

Troubleshooting Mobile App Errors with Rails API

Switch Bootstrap Tab

With Ionic, you can use one single codebase for both iPad and iPhone

Adjust the transparency of a navigation bar independently from the transparency of the text within the navigation bar

Trigger an instantaneous update of the masonry grid

Turning a Static Website Dynamic with Faceapp.js

What is the best way to group a Pie Chart by a string field in a .csv file using dc.js, d3.js, and crossfilter.js in a Node environment?

The Angular service is sending back the error message "undefined" when trying to retrieve data with the ID parameter from the requested

Discovering if objects possess intersecting branches and devising a useful error notification

Tips for Providing a Generic Type to a Component Imported Using Next.js Dynamic

How can I effectively utilize executeScript in Selenium and webdriver.io?