angular 5-当通过@Input将函数从组件传递到指令时，“ this”是指指令而不是Component

Question

I'm trying to make an autocomplete directive with angular.

I've made a small demo for this problem:

 import { Component, NgModule, VERSION, Directive, Injectable, Input } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @Directive({ selector: "[autocompleter]", host: { "(keyup)": "onKey($event)" } }) export class AutocompleterDirective{ @Input("autocompleter") getFilteredData: (term: string) => Promise<string[]>; private term = ""; public onKey(event: any) { this.term = event.target.value; this.search(); } private search() { this.getFilteredData(this.term) .then((res) => { //do something to show the results list }); } } @Injectable() export class DataService { searchStrings: string[]; getStringsFilteredByTerm(term: string) { //do some filters on searchStrings... return this.searchStrings; } } @Component({ selector: 'my-app', template: ` <div> <input type="text" [autocompleter]="getFilteredData" autocomplete="off" /> </div> `, }) export class AppComponent{ constructor(private dataService: DataService) { } private 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; } } @NgModule({ imports: [BrowserModule], declarations: [AppComponent, AutocompleterDirective], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule {} 

the problem is that in the "getFilteredData" function in "AppComponent", "this" refers to "AutocompleterDirective" instead of referring to "AppComponent", and I get this error:

Cannot read property 'getStringsFilteredByTerm' of undefined

I need to get the data from "dataService" which injected to "AppComponent".

Is there any way to solve this?

Answer 1

you're losing the scope, you can define your function using arrow function syntax to keep the correct scope, like so:

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

Side note: notice I didn't declare it as private, your prod builds will fail if you actually define that function as private and then try to pass it in template, though the dev server will work just fine.

Answer 2

In your component, for the function you are passing, add .bind(this) onto it, see if that works:

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

And pass that through.

If that fails, try the same but using ES5 function syntax.