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

Animation that increments to a predetermined value

When Ajax responseText and echo fail, the header file contents are sent back instead

reveal the concealed divs within the list elements

Sleek descending motion effect

Using Sinonjs fakeserver to handle numerous ajax requests

Incorporate Stripe Elements into your Nuxt Js application

How can I retrieve the `checked` state of an input in Vue 3 using Typescript?

The Material-ui Select component is experiencing issues with updating the state accurately

What is the best way to retrieve the value of an nth column in a table using

JavaScript: Struggles with utilizing a function as an argument and later executing it inside a nested function

The most secure method for retrieving User Id in AngularFire2

Tips for updating components with fresh data in Next.JS without having to refresh the page

What is the process for personalizing the appearance in cdk drag and drop mode?

What is the best method to generate a distinct identifier for individual input fields using either JavaScript or jQuery?

The XMLHttpRequest response states that the preflight request did not meet the access control check requirements

Once appearing, the element quickly vanishes after the fadeIn() function is

Syncing a line's position with the cursor in Angular using the ChartJs Annotation Plugin

Filtering an Array of Objects on the Fly in Vue.js

Issue with migrating from Angular version 2.4.10 to 4.0.0

Updating data within rows in Angular 4