Angular 8，如何在 javascript 库的函数中引用组件属性

Question

I am using Semantic UI in angular and I have the following code:

componentProperty: boolean = false;

 ngOnInit() {    
    (<any>$('.ui.dropdown')).dropdown();
    
    (<any>$('.ui.input')).popup({
        on: 'focus', 
        onShow: (e) => {
            return this.componentProperty;
        }
    });
}

the function popup is defined by semantic UI. Semantic UI relies on Jquery. Here componentProperty is undefined.

Answer 1

This about scope. Try:

 ngOnInit() {
    const me = this;

    (<any>$('.ui.dropdown')).dropdown();
    
    (<any>$('.ui.input')).popup({
        on: 'focus', 
        onShow: (e) => {
            return me.componentProperty;
        }
    });
}

Answer 2

Have you tryed to define the onShow function in the components scope?

ngOnInit() {    
   const onShow = () => this.componentProperty;
   (<any>$('.ui.input')).popup({
      on: 'focus', 
      onShow
   });
}

And if that still won't work:

  const doOnShow = () => this.componentProperty;
  (<any>$('.ui.input')).popup({
      on: 'focus', 
      onShow: doOnShow.bind(this)
   });