角度執行在正確的上下文中傳遞方法引用

我創建了一個組件si-button，它用作進度按鈕（單擊時顯示加載指示器）。角度執行在正確的上下文中傳遞方法引用

我傳遞給該方法的引用，對點擊被執行到si-button成分是這樣的：

<si-button [pb-click]="register">Register</si-button>

的register方法返回一個承諾，和裝載指示器被示出，只要該承諾ISN」解決。在SIButtonComponent類中，單擊按鈕時將執行register方法。

SIButtonComponent：

export class SIButtonComponent{ 
    ... 

    @Input('pb-click') pbClick :() => Promise<any> = null; 

    handleClick($event){ 
     this.loading = true; 

     this.pbClick().then(() => { 
      this.showSuccess(); 
     }, (data) => { 
      this.showError(); 
     }); 
    } 

    ... 
}

RegisterComponent：

export class RegisterComponent{ 
    register() : Promise<any> { 
     return new Promise((resolve, reject) => { 
      this.auth.register(this.email, this.password).subscribe((org : Organization) => { 
       resolve(); 
      }, (error : ErrorResponse) => { 
       reject(); 
      }); 
     }); 
    } 
}

問題由於該方法register是從SIButtonComponent一個實例中執行，this指SIButtonComponent實例，而不是RegisterComponent。我應該如何正確地做到這一點？對於pb-click參數，使用@Output而不是@Input會更合理，但我不知道如何在發出click事件後再獲取Promise -instance。

來源

2017-04-01 Anton Gildebrand

傳遞一個箭頭函數：

export class RegisterComponent { 
    registerFunction =() => this.register(); 
    ... 
} 

<si-button [pb-click]="registerFunction">Register</si-button>

來源

2017-04-01 11:08:34

這個偉大的工程，但是爲什麼呢？我想了解背後的機制:) 謝謝！ –

因爲箭頭函數綁定到'this'。這是爲什麼它們存在的主要原因（除了減少的冗長度之外）。它相當於'function（）{return this.register（）; } .bind（這）'。 –

太棒了，謝謝！ –

角度執行在正確的上下文中傳遞方法引用

回答

相關問題