Обработка события изменения размера в структурной директиве без потери контекста

Question

Я создаю ngIf подобную структурную директиву для работы с платформой.

*ifPl="'android'

Это работает, я имею в виду, если я на ios, элемент не находится вДОМ, еще да.Но я хочу продолжить с обработкой события resize, представьте, что я разрабатываю в браузере и меняю устройство (оно меняет размер), поэтому я хочу, чтобы DOM был добавлен / удален в этот момент.

Я обработал resize с помощью Renderer2, как показано ниже:

Renderer2.listen('window', 'resize', this.onResize)

Но я потерял свой контекст в функции onResize, this не определен ... Я хочу сохранить контекст вэтот случай.

Использование HTML:

<div *ifPl="'android'">
  ROMAIN
</div>

Directive.ts

@Input('ifPl')
set myIfPl(platform: string) {
  this.platform = platform;
  this._context.$implicit = this._context.ifPlatform = IsThisPlateForm(window, platform);
  console.log(IsThisPlateForm(window, platform))
  this._updateView();
  this.render.listen("window", "resize", this.onResize)
}

private _updateView() {
  if (!this._context.$implicit) {
      this._viewContainer.clear();
  } else {
    this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
  }
}

onResize(){ console.log(this) } //this == undefined

Answer 1

Вы можете сохранить контекст следующими способами:

this.render.listen("window", "resize", this.onResize.bind(this));

// arrow function
this.render.listen("window", "resize", () => this.onResize());

Для второго способа, если вам нужен параметр события, вам нужно будет добавить его в функцию стрелки и преобразовать в свою функцию.

 this.render.listen("window", "resize", (e) => this.onResize(e));