在 init jquery 函数中使用 angular2 组件 属性

Question

我正在使用 angular2 开发网络应用程序。我也在使用 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 class 中使用 function 关键字。这会弄乱 this 上下文。始终使用箭头函数符号：

ngAfterViewInit() {
  this.initJquery();
}

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