在初始化jQuery函数中使用Angular2组件属性

Question

我正在使用Angular2开发Web应用程序。 我也在使用jquery自动完成。 我向远程服务器发出请求并获取完成数据，但服务器地址在自动完成功能中被硬编码。 我尝试使用组件属性，但我无法将值作为参数传递给 jquery 初始化函数。

ngOninit() {
   this.initJquery();
 }
 private initJQuery() {
    setTimeout(() => {
        $(() => { 
            $("#city-area").autocomplete({
                source: function (request, response) {
                    $.ajax({ 
                        url: "***how to use component value here?***",
                      ...
            }).data("ui-autocomplete")._renderItem = function (ul, item) {
            };
        });
    }, 0); 
}

如何在 jquery 函数中使用组件值？

Answer 1

这是一些时髦的代码。无论如何，你永远不应该在 TypeScript 类中使用 function 关键字。这会弄乱this上下文。始终使用箭头函数表示法：

ngAfterViewInit() {
  this.initJquery();
}
private initJQuery() {    
  $("#city-area").autocomplete({
     source: (request, response) => {
        $.ajax({ 
           url: this.url
        }).data("ui-autocomplete")._renderItem = (ul, item) => {}; 
  });
}