Как получить экземпляр компонента в функции, которая передается в качестве параметра?

#html #angular #typescript

Вопрос:

Я использую элемент с возможностью углового изменения размера, и представление ожидает validateResize , что будет передана функция. Мой текущий код выглядит следующим образом:

 <div mwlResizable
     [enableGhostResize]="true"
     [validateResize]="validate"
     <!-- Other stuff -->
</div>
 

И компонент:

 @Component({
  // Stuff
})
export class TdeComponent {

  // Other code

  validate(event: ResizeEvent): boolean {

    if (event.rectangle.width < 50 ||  event.rectangle.height < 50)
      return false;

    // I need the component instance here.
    // However, `this` keyword refers to the caller, not to the component

    return true;
  }
}
 

Проверка передается в качестве параметра. Когда он вызывается, this он ссылается не на мой компонент, а на вызывающий класс. Однако мне нужны переменные компонентов внутри этого метода. Как я могу получить доступ к ссылке на компонент внутри validate метода?

Ответ №1:

Используйте функции со стрелками

 validate = (event: RedizeEvent) => {
    // code
}
 

Или привязать контекст [validateResize]="validate.bind(this)"

Комментарии:

1. Я опробовал ваше решение, оно работает. Вот ваши решения в СтекбЛитце с разными именами методов, но с одинаковой функциональностью. Интересно, что использование .bind(это) работает, но показывает неправильный результат. А? stackblitz.com/edit/angular-ivy-efdlxy

2. он показывает Hello John! ,это неправильный ответ?

3. Забавно! Я обманывал себя, извини, все в порядке, потому что Джон-правильный ответ, а не неправильный 🙂 Извини, уже слишком поздно….