服務功能用作輸入參數時，不會注入Angular Service的依賴關係輸入參數

Question

我們有一些奇怪的依賴注入問題，我們不明白...我嘗試說明情況。

我們有一個addressComponent，我們注入了我們的addressService。因此，這是服務（見兩次注射http和AppConfig的）：

@Injectable() 
export class AdresseService{ 

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

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

這是組件：

export class AdresseComponent { 

    constructor(public adresseService: AdresseService) { 
    } 
} 

該組件這個片段在其HTML：

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

因此，我們在組件中注入服務，並將此服務的功能作爲參數提供給另一個組件。而這是其他組件，我們實際上調用這個函數：

export class OtherComponent { 

    @Input() fn; 

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

所以問題：功能「makeSth」的AdresseService實際上是調用，但該服務依賴（比如HTTP或AppConfig的）不注射。因此，我們在AdresseService的makeSth方法中出現一些錯誤，如「get of undefined ....」。這裏發生了什麼？

當我們將服務定義爲其他組件的依賴關係時，它起作用。當我們給整個服務（而不是隻給它一個函數）作爲參數時，它也可以工作。但爲什麼這個設置不起作用？

Answer 1

您正在傳遞一個類函數作爲回調函數。 在這種情況下，this的值發生變化，新的this將不會有http和其他注入屬性。

使用箭頭函數或綁定函數作爲回調函數。

在您的組件，

export class AdresseComponent { 

    makeSth:any; 

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

而在你的HTML，

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