Обеспечение доступности логической переменной в родительской области - PullRequest
Новая
       17

Обеспечение доступности логической переменной в родительской области

0 голосов
/ 18 марта 2020

Учитывая компонент ниже 

export class VideoPlayerComponent implements AfterViewInit {
  @ViewChild('videoPlayer', { static: false })
  videoPlayer: ElementRef;

  @Input()
  videoUrl: string;

  @Input()
  videoType: string;
  /** Subject that emits when the component has been destroyed. */

  @Output()
  onPlayerEvent = new EventEmitter<VideoPlayerEvent>();
  videoJsPlayer: videojs.Player;
  showTimestamp: boolean = false;
  timeStamp: string;

  constructor() { }
  ngAfterViewInit() {
    if (this.videoUrl) {
      const self = this;
      this.videoJsPlayer = videojs(this.videoPlayer.nativeElement, {}, function () {
        this.on('play', () => self.onPlayerEvent.emit('play'));

        this.on('pause', () => self.onPlayerEvent.emit('pause'));

        this.on('ended', () => self.onPlayerEvent.emit('ended'));
        return hls;
      });
      const myButton = this.videoJsPlayer.controlBar.addChild("button");
      const myButtonDom = myButton.el();
      myButtonDom.innerHTML = "<i class=\"material-icons\">\n" +
                              "query_builder\n" +
                              "</i>";

      // @ts-ignore
      myButtonDom.onclick = function(){
        console.log('click');
        this.showTimestamp = !this.showTimestamp;
        console.log(this.showTimestamp);
      };
    }
  }
}

Я пытаюсь переключать переменную 'showTimestamp' всякий раз, когда происходит событие onclick. Похоже, что это обновление в области действия «function () {}», однако это не обновление в области действия компонента в целом.

Как мне это исправить?

1 Ответ

2 голосов
/ 18 марта 2020

У вас есть несколько проблем с вашим подходом, отличным от Angular.

Основная проблема - проблема classi c Javascript - this в функциях, объявленных как: function() { } относится к сама функция. Для ссылки на внешнюю область вы должны объявить функции с помощью стрелочных обозначений. 

myButtonDom.onclick = () => {
  console.log('click'); 
  this.showTimestamp = !this.showTimestamp;
  console.log(this.showTimestamp);
};

НО вы не должны вручную манипулировать DOM в проекте Angular в любом случае. Вы должны построить свой HTML динамически и привязать события щелчка к их обработчикам в HTML.

Я не знаю, каковы ваши требования HTML, но вы бы привязали обработчики щелчков следующим образом: 

<button (click)="myClickHandler()">
 Click me
</button>
...