无法更新角度组件中 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";
}
}

查看 ： 应用程序组件.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();

Answer 1

将$('#buttionid').click事件移到AppComponentngAfterViewInit()内是一个生命周期回调。Angular 在根组件之后调用它，它的子组件已经渲染，它应该适合你的目的。

由于来自@charlietflthis的评论不会成为您类的对象。它将是按钮的对象。要解决问题，您可以将普通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";
}
}

Answer 2

试试这个：

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关键字的上下文与内部() => {}

不同