我有一些有线问题时，更新视图。
场景:
我已经在angular组件的oninit上声明了jquery按钮单击事件。 在单击事件上，我在视图上更新模型值和绑定，但是当我单击按钮时，视图中没有更新它。 如果我在angular click事件（create）中使用相同的方法，它将在视图中显示更新的值。
不知道这里出了什么问题。
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();
移动$('#ButtionId')。单击AppComponent的NGAfterViewInit()中的事件是一个生命周期回调。 Angular在呈现根组件及其子组件之后调用它，它应该适合您的目的。
作为来自@CharlietFL的注释，这个将不是您类的对象。 它将成为按钮的对象。 要解决此问题，您可以将正常的函数更改为箭头函数，如下所示。
另见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";
}
}
请尝试以下操作:
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);
})
});
}
在函数（）{}（非箭头函数）中，this关键字的上下文与Inside()=>不同； {}
