jquery - 从 jQuery 函数更新 Angular 5 变量值和 View 中的绑定(bind)

Question

我在这里面临一个非常尴尬的问题...来自 jQuery 函数的 Angular 5 变量值正在更改，但没有反射(reflect)/绑定(bind) View 中的新值:

在组件中:

import { Component, OnInit } from '@angular/core';
    declare var $: any;

    export class TestComponent implements OnInit {

    helloString: string = 'Hello World';

    ngOnInit() {
        $(() => {
          $(document).on('click', '#testButton', () => {
            this.helloString= "Not Hello World";
            console.log(this.helloString);
          });
        });
      }
    }

在 HTML 中:

    <div>{{helloString}}</div>

    //This button is in jQuery Datatable row..that's why I need the call function from jQuery

    <button type="button" id="testButton" class="btn btn-info btn-sm">Test Button</button>

函数正在正确调用，并且 helloString 变量值在函数中发生变化，更新后的值也显示在控制台中，但没有反射(reflect)在 View 中。任何帮助将不胜感激。

Answer 1

发生这种情况是因为你的 jquery 方法没有触发 Angular 的更改检测，因为它没有在 ngZone 中注册为异步事件，而 ngZone 正是 AngZone 用来知道何时应该检测更改的。

最好的建议是...不要这样做并删除 jquery 依赖项...但如果必须，那么您可以直接使用 ngZone 在 ngZone 内运行:

import { Component, OnInit, NgZone } from '@angular/core';
declare var $: any;

export class TestComponent implements OnInit {

  helloString: string = 'Hello World';

  constructor(private _ngZone: NgZone) {}

  ngOnInit() {
    $(() => {
      $(document).on('click', '#testButton', () => {
        this._ngZone.run(() => {
          this.helloString= "Not Hello World";
          console.log(this.helloString);
        });
      });
    });
  }
}

现在 Angular 会知道发生了一些事情并且需要更改检测