在同一个类中调用函数不起作用，打字稿

Question

我是 typescript 的新手，在同一个类中调用函数时遇到问题： 我有这样的功能：

createPost(url: String, data: any) {
    $.ajax({
      url: url + "/" + GLOBAL.REGISTER_URL,
      type: "POST",
      data: data.serialize(),
      success: function() {
        console.log("success");
      },
      error: function(request, status, error) {
        console.log(request.responseText);
        console.log(status);
        console.log(error);
      }
    });
  }

我想在这里称呼它：

.on('success.form.bv', function(e) {
        $('#success_message').slideDown("slow"); // Do something ...
        $('#contact_form').data('bootstrapValidator').resetForm();

        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');

        // XXX reassigning port for testing purposes only
        var result = "https://" + window.location.hostname + ":" + GLOBAL.PORT + "/" + GLOBAL.VERSION + "/rest" + GLOBAL.REGISTER_URL;

        this.createPost(result, $form);
      });

但这不起作用，每次单击按钮时，浏览器都会出错：

错误类型错误：this.createPost 不是函数堆栈跟踪： ../../../../../src/app/register/register.component.ts/RegisterComponent.prototype.ngOnInit/http://localhost:4200/main.bundle.js:839:13 调度@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:3:10263 添加/q.handle@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:3:8325 触发@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:4:5806 触发/http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:4:6310 每个@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:2:2813 每个@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:2:1001 触发@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:4:6289 _提交@http://localhost:4200/assets/js-lib/bootstrapValidator.js:549:13 验证@http://localhost:4200/assets/js-lib/bootstrapValidator.js:857:13 _init/http://localhost:4200/assets/js-lib/bootstrapValidator.js:109:21 调度@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:3:10263 添加/q.handle@http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:3:8325 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2839:17 onInvokeTask@http://localhost:4200/vendor.bundle.js:49785:24 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2838:17 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2606:28 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2913:24 调用任务@http://localhost:4200/polyfills.bundle.js:3785:9 globalZoneAwareCallback@http://localhost:4200/polyfills.bundle.js:3803:17

这应该是一个简单的函数调用，不知道是怎么回事，谁能帮我解决这个问题？

Answer 1

由于关闭，您遇到了问题。通常 Typescript 和 Angular 可以解决这个问题，但是....您使用的是 jQuery？

修复：

改变

createPost(url: String, data: any) {...}

到

createPost = (url: String, data: any) => {...}

胖箭头或 lambda 函数创建一个不会改变范围的词法 this。

...顺便说一句，为什么将 jQuery 与 Angular 2+ 一起使用？ Angular 已经为捕获和公开 DOM API 做了很多工作，这似乎是在自取其辱 并通过使用 jQuery 颠覆来故意使事情变得过于复杂。 Angular 足以让 jQuery 完全没有必要。

Answer 2

我认为您的问题出在范围上。我可以建议您尝试以下方法：

.on('success.form.bv',(e) => { //<-- use arrow func
        $('#success_message').slideDown("slow"); // Do something ...
        $('#contact_form').data('bootstrapValidator').resetForm();

        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');

        // XXX reassigning port for testing purposes only
        var result = "https://" + window.location.hostname + ":" + GLOBAL.PORT + "/" + GLOBAL.VERSION + "/rest" + GLOBAL.REGISTER_URL;

        this.createPost(result, $form);
      });

或者像这样包装你的：

var _that = this;
.on('success.form.bv', function(e) {
        $('#success_message').slideDown("slow"); // Do something ...
        $('#contact_form').data('bootstrapValidator').resetForm();

        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');

        // XXX reassigning port for testing purposes only
        var result = "https://" + window.location.hostname + ":" + GLOBAL.PORT + "/" + GLOBAL.VERSION + "/rest" + GLOBAL.REGISTER_URL;

        _that.createPost(result, $form);
      });

Answer 3

不要在 TypeScript 中使用 function {}。请改用() => {} 以使this 引用保持有效。

否则你必须使用(function() {}).bind(this)来保留this。

  .on('success.form.bv', (e) => {
    // ......
    this.createPost(result, $form);
  });