Angular 角度5-“this”指的是通过@Input将函数从组件传递到指令时的指令，而不是组件

我想用angular做一个自动完成指令

我为这个问题做了一个小演示：

从“@angular/core”导入{Component，NgModule，VERSION，Directive，Injectable，Input}； 从“@angular/platform browser”导入{BrowserModule}； @指示{ 选择器：[自动完成器]， 主持人:{ keyup:onKey$事件 } } 导出类自动完成指令{ @Inputautocompleter getFilteredData:term:string=>Promise； 专用术语=； public onKeyevent：任何{ this.term=event.target.value； 这是搜索； } 私人搜索{ 此.getFilteredatathis.term .thenres=>{ //做一些事情来显示结果列表 }; } } @注射的 导出类数据服务{ searchStrings:string[]； GetStringsFilteredByterm:string{ //对搜索字符串执行一些筛选。。。 返回此.searchStrings； } } @组成部分{ 选择器：“我的应用程序”， 模板：` `, } 导出类AppComponent{ 构造函数私有数据服务：数据服务{ } 私有getFilteredStaterm:string{ 让filteredStrings=this.dataService.GetStringsFilteredByterm；//这指的是AutoCompleter指令，而不是AppComponent 风险值承诺=新承诺人解决，拒绝=>{ 解析过滤字符串； }; 回报承诺； } } @NGD模块{ 导入：[BrowserModule]， 声明：[AppComponent，AutocompleterDirective]， 提供者：[数据服务]， 引导：[AppComponent] }

---

在组件中导出类AppModule{}，对于要传递的函数，在其上添加.bindthis，查看是否有效：

const theFunc = () => {
    // blah
}.bind(this)

把它传过去

---

如果失败，请尝试相同的方法，但使用ES5函数语法。

如果失去作用域，可以使用箭头函数语法定义函数以保持正确的作用域，如下所示：

  getFilteredData = (term: string) => {
    let filteredStrings = this.dataService.getStringsFilteredByTerm(term); //"this" refers to the AutocompleterDirective instead of AppComponent
    var promise = new Promise((resolve, reject) => {
      resolve(filteredStrings);
    });
    return promise;
  }

---

旁注：请注意，我没有将其声明为private，如果您实际将该函数定义为private，然后尝试在模板中传递它，那么您的prod构建将失败，尽管dev服务器可以正常工作。

您实际上只使用一个文件吗？或者，您可以在构造函数中执行此操作-this.getFilteredata=this.getFilteredata.bindThis我也喜欢这种方法：