If you were to write something like: <div class="snippet-clipboard-content notrans

This issue has been fixed by <a href="https://github.com/amcdnl/ngrx-actions/commit/5a

<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" da

Select fn this binding about ngrx-actions HOT 2 CLOSED

amcdnl commented on May 30, 2024

Select fn this binding

from ngrx-actions.

Comments (2)

albyrock87 commented on May 30, 2024 1

This issue has been fixed by this commit.

from ngrx-actions.

albyrock87 commented on May 30, 2024

function Selector(fn: () => string) {
  return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(fn.bind(target)());
  }
}

class Foo {
  @Selector(() => {
    return this.fn();
  })
  bar: string;

  fn() {
    return "hello";
  }
}

transpiles to:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var _this = this;
function Selector(fn) {
    return function (target, propertyKey, descriptor) {
        console.log(fn.bind(target)());
    };
}
var Foo = /** @class */ (function () {
    function Foo() {
    }
    Foo.prototype.fn = function () {
        return "hello";
    };
    __decorate([
        Selector(function () {
            return _this.fn();
        })
    ], Foo.prototype, "bar", void 0);
    return Foo;
}());

You can notice that this becomes a _this that is not the object reference.
That's because the decorator is invoked at "class definition" time.

If you want to achieve your purpose you should do something like this:

function Selector(fn: () => string) {
  return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(fn.bind(target)());
  }
}

class Foo {
  @Selector(function(){
    return this.fn();
  })
  bar: string;

  fn() {
    return "hello";
  }
}