在打字稿中，如何创建添加装饰器的装饰器？

Question

In Angular, I'm trying to prompt the user when closing the window with a dirty form. I have code that works with by listening to window:beforeunload , but the same code is duplicated on every Component . I am trying to add a decorator that can be placed on the component that will mix-in the required logic, but that requires add a function and then applying a decorator on it. My attempt is below, but it doesn't seem to be working (ie, my event listener is never called).

export function createOnBeforeUnload() {
    return function ($event: any) {
        console.log('calling onBeforeUnload', this, $event);
        if (this.isDirty && this.isDirty()) {
            console.log('setting message');
            $event.returnValue = DIRTY_CONFIRM_MSG;
        }
    };
}


export function DirtyChecking() {
    return function (target: any) {
        if (target.prototype) {
            console.log('adding dirty checking to', target);
            target.prototype._onBeforeUnload = createOnBeforeUnload();
            // attempt at adding the @HostListener decorator
            HostListener('window:beforeunload', ['$event'])(target.prototype._onBeforeUnload);
        }
    };
}

My component is

@DirtyChecking()
@Component({
    template: `
    <h2>Dirty Checker</h2>

    <form novalidate>

      <div class="form-group">
        <label for="dirty">Dirty?</label>
        <input class="form-control" type="checkbox" id="dirty" name="dirty"
               [(ngModel)]="dirty">
      </div>

    </form>
  `,
})
export class DemoDirtyCheckerComponent implements IsDirty {

    private dirty = false;

    constructor() {
    }

    toggle() {
        this.dirty = !this.dirty;
    }

    isDirty() {
        console.log('is dirty demo?', this.dirty);
        return this.dirty;
    }
}

The decorator is being called because I see "adding dirty checking to" in the console. However, when I close the window _onBeforeUnload isn't being called like I expect to to have be.

Answer 1

I took the solution suggested from @Harry Ninh

import { HostListener } from '@angular/core';

export abstract class IsDirtyComponent {
    abstract isDirty(): boolean;

    @HostListener('window:beforeunload', ['$event'])
    onBeforeUnload($event: any): void {

        if (this.isDirty()) {
            $event.returnValue = 'Are you sure?';
        }
    }

}