Angular Service Abhängigkeiten werden nicht injiziert, wenn Service-Funktion als Input-Parameter verwendet wird

Question

Wir haben einige seltsame Abhängigkeit Injektion Problem, das wir nicht verstehen ... Ich versuche, die Situation zu demonstrieren.

Wir haben eine addressComponent, wo wir unseren addressService injizieren. Das ist also der Dienst (siehe die beiden Injektionen http und appconfig):

@Injectable() 
export class AdresseService{ 

    constructor(private http: Http, private appConfig: AppConfig) { 
     .... 
    } 

    makeSth() { 
     this.http.get(.....); 
    } 
} 

Dies ist die Komponente:

export class AdresseComponent { 

    constructor(public adresseService: AdresseService) { 
    } 
} 

Diese Komponente dieses Schnipsel in seiner html hat:

<other-component-tag [fn]="adresseService.makeSth"</other-component-tag> 

Wir injizieren also den Dienst in die Komponente und geben eine Funktion dieses Dienstes als Parameter für eine andere Komponente an. Und das ist die andere Komponente, wo wir diese Funktion tatsächlich nennen:

export class OtherComponent { 

    @Input() fn; 

    callFunction() { 
    this.fn(); 
    } 
} 

So ist das Problem: Die Funktion „makeSth“ von AdresseService tatsächlich aufgerufen wird, aber die Service-Abhängigkeiten (zB http oder appconfig) nicht injiziert. Also bekommen wir einen Fehler wie "get of undefined ...." in der makeSth Methode von AdresseService. Was geht hier vor sich?

Wenn wir den Dienst als eine Abhängigkeit von anderen Komponenten definieren, funktioniert es. Auch wenn wir den ganzen Dienst (anstatt nur eine Funktion davon zu geben) als Parameter geben, funktioniert es auch. Aber warum funktioniert dieses Setup nicht?

Answer 1

Sie übergeben eine Klassenfunktion als Rückruf. In diesem Fall ändert sich der Wert this und der neue this hat keine http und andere injizierte Eigenschaften.

Verwenden Sie die Pfeilfunktion oder eine gebundene Funktion als Callback.

In Ihrer Komponente,

export class AdresseComponent { 

    makeSth:any; 

    constructor(public adresseService: AdresseService) { 
    this.makeSth =() => this.adresseService.makeSth() 
    } 
} 

Und in Ihrem html,

<other-component-tag [fn]="makeSth"</other-component-tag>