Question

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

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);
      });

但这不起作用，每当我点击按钮时，我在浏览器中出错：

错误TypeError：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 add/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 触发/＆LT; @ 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 _submit @ http://localhost:4200/assets/js-lib/bootstrapValidator.js:549:13 验证@ http://localhost:4200/assets/js-lib/bootstrapValidator.js:857:13 _init /＆LT; @ http://localhost:4200/assets/js-lib/bootstrapValidator.js:109:21 调度@ http://localhost:4200/assets/js-lib/jquery-3.1.1.min.js:3:10263 add/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 invokeTask @ http://localhost:4200/polyfills.bundle.js:3785:9 globalZoneAwareCallback @ http://localhost:4200/polyfills.bundle.js:3803:17

这应该是一个简单的函数调用，我不知道发生了什么，任何人都可以帮我解决这个问题吗？

Answer 1

我认为你的问题是针对范围的...我可以向你推荐的是尝试类似的东西：

.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 2

不要将function {}与TypeScript一起使用。而是使用() => {}以使this引用保持有效。

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

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

Answer 3

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

修复：

变化

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

到

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

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

...另外，为什么在Angular 2+中使用jQuery？ Angular已经做了很多事情来捕获和暴露DOM API，它似乎在拍摄自己的脚并通过使用jQuery破坏它而故意使事情过于复杂。 Angular足以让jQuery完全不必要。

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

3 个答案: