角2層觀察到的認購箭頭的功能越來越大，髒

我想知道是否有更好的方法來定義回調函數的角2觀察到與HTTP打交道時認購調用不違反當談到嵌入式邏輯女巫導致一個醜陋的髒碼。角2層觀察到的認購箭頭的功能越來越大，髒

我想使用函數變量而不是箭頭函數來分開回調邏輯，但我不能訪問this和本地函數變量（示例中的state）。

updateState(state: string) { 
    let proposition = new Proposition(); 
    proposition.id = this.id; 
    proposition.state = state; 
    this.propositionService.updateProposition(proposition).subscribe(
    (data) => { 
    .... 
    // instruction using local variable 
    this.router.navigate(['/portfolio', state]); 
    .... 
    }, 
    ..... 
    // instrution using this 
    (errors) => this.toastr.warning('Error.', 'ops !'); 
    .....}

來源

2017-02-10 user2080105

我真的不明白你在這裏做什麼。你想在訂閱中去其他路線嗎？你想在router.navigate之前定義動作？你能澄清一下嗎？ – ZanattMan

其實「=>」有你當前的組件，但是當你使用函數變量時，那麼你的組件有這個新的東西所以你不能得到你的局部變量（data）=>這是Angular 2的承諾，所以你必須使用lemda表達式。 –

@ ER.SHASHITIWARI我已經經歷過，我在問如何找到一個好的替代品 – user2080105

有很多選項，都有利弊。您應該根據具體情況選擇最具有優勢和最少缺點的那種。

這裏有幾個選項（還有更多）

一個箭頭函數創建一個本地綁定。

updateState(state: string) { 
    const withNext = (data: { values: {}[] }) => { 
    console.info(data.values); 
    .... 
    // instruction using local variable 
    this.router.navigate(['/portfolio', state]); 
    .... 
    }; 

    const withError = error => { 
    this.toastr.warning('Error.', error); 
    } 

    this.propositionService.updateProposition(proposition) 
    .subscribe(withNext, withError); 
}

這種方法的缺點是，你需要在使用之前創建的回調，因爲分配將不會被吊起，和你的回調參數的輸類型推斷，需要重申的說法類型冗餘。

要解決的聲明順序問題，我們可以創建一個本地函數聲明

updateState(state: string) { 
    this.propositionService.updateProposition(proposition) 
    .subscribe(withNext, withError); 

    const that = this; 

    function withNext(data: { values: {}[] }) { 
    console.info(data.values); 
    .... 
    // instruction using local variable 
    that.router.navigate(['/portfolio', state]); 
    .... 
    } 

    function withError(error) { 
    that.toastr.warning('Error.', error); 
    } 
}

這種方法的缺點是，你需要再次別名this，而且，在我們失去了類型推斷和必須採用冗餘方式，也許不正確地手動指定回調的參數類型。

如果observable只發出單個值，例如如果它表示HTTP請求，那麼我們可以使用toPromise，並且可以使用完整類型推斷並且無需回調來享受清晰乾淨的代碼。

async updateState(state: string) { 
    try { 
    const data = await this.propositionService.updateProposition(proposition) 
     .toPromise(); 
    console.info(data.values); 
    .... 
    // instruction using local variable 
    this.router.navigate(['/portfolio', state]); 
    .... 
    } catch (error) { 
    this.toastr.warning('Error.', error); 
    } 
}

缺點是，這種方法只適用於發射至多一個單一值（例如HTTP請求）觀測。

的state參數是所有本地聲明無論方式訪問，除非你想提取成功和失敗的邏輯的某個位置updateState方法之外是不是一個因素。

來源

2017-02-11 23:49:03

角2層觀察到的認購箭頭的功能越來越大，髒

回答

相關問題