Question

我试图在jQuery函数中调用一个函数。但是我无法使用这个＆＃39;范围，因为它引用了HTMLElement。

import { Component, Input } from '@angular/core';
import { Injectable }     from '@angular/core';
import * as $ from 'jquery';

@Injectable()
export class ChatService {
   public chatObj : SomeChatObject;

    constructor() { }
    disconnect(){
       console.log("Chat Disconnected");
    }

    beforeReload = $(window).bind("beforeunload",function(){
         //here 'this' is referred to HTML element. So i am not able to call the disconnect method.
         this.disconnect();
    });

}

我无法访问＆＃39;断开＆＃39; jQuery函数里面的方法。我怎样才能打电话给＆＃39;断开＆＃39;方法

Answer 1

尝试以下操作。

beforeReload = $(window).bind("beforeunload",() => {
     //here 'this' is referred to HTML element. So i am not able to call the disconnect method.
     this.disconnect();
});

尝试将功能定义为() => {}而不是function() {}。因为this引用了最接近的function或class。在您的情况下，this指的是其最接近的功能。尝试使用() => {}来转义函数引用。

Answer 2

您可以绑定您的函数，为其赋予this的值。

beforeReload = $(window).bind("beforeunload", this.disconnect.bind(this));

或

beforeReload = $(window).bind("beforeunload", (function() {
     this.disconnect();
}).bind(this));

Answer 3

正如@Yurzui所指出的那样使用像这样的箭头函数

beforeReload = $(window).bind("beforeunload",() =>{
     // use the arrow function 
     this.disconnect();
});

否则如果你想继续使用旧语法，可以使用像

这样的东西

beforeReload = $(window).bind("beforeunload",function(){
     //here 'this' is referred to HTML element. So i am not able to call the disconnect method.
     this.disconnect();
}).bind(this); // check this line

箭头函数在函数内保留this的值这是ES6中最受欢迎的最受欢迎的变化之一。

Answer 4

试试这个：

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

export class Component implements OnInit {

    constructor() { }

    ngOnInit() {
        jQuery(window).bind('beforeunload', function() {
            this.disconnect();
        }.bind(this));
    }

    disconnect() {
        console.log('disconnect');
    }
}

在Angular 2中调用jquery函数内部组件的函数

4 个答案: