jquery - 无法更新角度组件中 jquery 事件中模型属性更改的视图

Question

我在更新视图时遇到了一些有线问题。

设想 ：

我已经在角度组件的 oninit 上声明了 jquery 按钮单击事件。在单击事件上，我正在更新模型值并在视图上绑定但是当我单击按钮时，它不会在视图中更新。如果我在角度单击事件（创建）中使用相同的值，它会在视图中显示更新的值。

不知道这里出了什么问题。

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> 

这是我尝试在 UI 上更新模型的演示应用程序。在实际应用中，我使用的是 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();

标签： jqueryangular

Answer 1

内部的移动$('#buttionid').click事件是一个生命周期回调。Angular 在根组件和它的子组件被渲染之后调用它，它应该适合您的目的。ngAfterViewInit()AppComponent

@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";
  }

}