Невозможно обновить представление при изменении свойства модели в событии jquery в компоненте angular

Question

У меня возникла проблема с подключением к сети при обновлении представления.

Сценарий:

Я объявил событие нажатия кнопки jquery в oninit компонента angular. При событии щелчка я обновляю значение модели и привязку к представлению. Но когда я нажимаю кнопку, она не обновляется в представлении. Если я использовал то же самое в angular событии щелчка (создать), он показывает обновленное значение в представлении.

Не уверен, что здесь происходит не так.

import { Component, OnInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  messagee: string;

  constructor(private elementRef:ElementRef){
    this.messagee = 'Set in constructor'
  }

  ngOnInit(): void {
     $(document).ready(function(){
      $('#buttionid').click(function(){

        //this message never displayed in 
        this.messagee ="Hello on button click handler in jquery"; 

        $('#lblMessage').text(this.messagee);
      })
     });
  }

  ngAfterViewInit(){

    var jquery = document.createElement('script');
    jquery.type = 'text/javascript';
    jquery.src = './node_modules/jquery/src/jquery.js';
    this.elementRef.nativeElement.appendChild(jquery);

  }

  title = 'jquerydemo';

  create () {
    this.messagee ="I am  called from button";
  }

}

Просмотр: app.component. html

<button id='buttionid' type="button">Jquery click</button>
<br/>
<button (click)="create()">Angular click</button>

<br/>By finding span id in jquery :  <span id="lblMessage"> </span>

<div>using interpoation method :{{messagee}}</div> 

Это демонстрационное приложение, в котором я пытался обновить модель в пользовательском интерфейсе. В реальном приложении я использую jsTree. В приложении jsTree есть событие jquery.

$('#jstree')
  // listen for event
  .on('changed.jstree', function (e, data) {
    var i, j, r = [];
    for(i = 0, j = data.selected.length; i < j; i++) {

     //Unable to passed value from this event to UI or any other compoents
      r.push(data.instance.get_node(data.selected[i]).text);

    }
    $('#event_result').html('Selected: ' + r.join(', '));
  })
  // create the instance
  .jstree();

Answer 1

попробуйте следующее:

ngOnInit(): void {
     const self = this:
     $(document).ready(function(){
      $('#buttionid').click(function(){

        //this message never displayed in 
        self.messagee ="Hello on button click handler in jquery"; 

        $('#lblMessage').text(self.messagee);
      })
     });
  }

или

ngOnInit(): void {
     $(document).ready(function(){
      $('#buttionid').click(() => {

        //this message never displayed in 
        this.messagee ="Hello on button click handler in jquery"; 

        $('#lblMessage').text(this.messagee);
      })
     });
  }

Внутри function(){} (без стрелочных функций) контекст ключевого слова this не такой, как внутри () => {}

Answer 2

Событие

Move $('#buttionid').click внутри ngAfterViewInit() из AppComponent является обратным вызовом жизненного цикла. Angular вызывает его после того, как компонент root и его дочерние элементы были отрисованы, и он должен соответствовать вашим целям.

Как комментарий от @charlietfl this не будет объектом вашего класса. Это будет объект кнопки. Чтобы решить проблему, вы можете изменить обычный function на arrow function, как показано ниже.

См. Также https://angular.io/guide/lifecycle-hooks

import { Component, OnInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  messagee: string;

  constructor(private elementRef:ElementRef){
    this.messagee = 'Set in constructor'
  }

  ngOnInit(): void {
   }

  ngAfterViewInit(){

      $('#buttionid').click(() => {

        //this message never displayed in 
        this.messagee ="Hello on button click handler in jquery"; 

        $('#lblMessage').text(this.messagee);
      });
     
  

    var jquery = document.createElement('script');
    jquery.type = 'text/javascript';
    jquery.src = './node_modules/jquery/src/jquery.js';
    this.elementRef.nativeElement.appendChild(jquery);

  }

  title = 'jquerydemo';

  create () {
    this.messagee ="I am  called from button";
  }

}