角CLI // //打字稿鉻調試> Arrow功能喪失方面

，因爲一個問題了幾天我掙扎，我無法解釋：角CLI // //打字稿鉻調試> Arrow功能喪失方面

我有一個角4 CLI項目運行良好
我有我的組件的方法的一個箭頭的功能，設置在我的組件屬性
當我在我的箭功能將斷點在Chrome瀏覽器開發工具（或VS代碼調試器針對Chrome瀏覽器相同的行爲）時，這個背景並不侷限於組件
但如果我執行的代碼，它的工作原理以及

示例代碼：

export class MyComponent { 

    private message = 'Im here!'; 

    constructor() { 
    const test =() => { 
     console.log(this.message); 
    }; 

    test(); 
    } 

}

如果我把一個斷點上的console.log（this.message）的線，這種情況下會undefined在調試器中，但在執行時，它會寫'Im here！'在我的控制檯。

你有沒有經歷過這個問題？我的源地圖idk有問題嗎？

來源

2017-10-17 Yoann B

So ** _ this **，轉譯器生成的上下文變量被調試器識別。這工作，但不方便，是沒有辦法使用「真正的」**這個**上下文 –

我有同樣的問題，只是在鉻開發工具，我可以看到「這個」的價值，但在vscode它是未定義的 – benshabatnoam

嘗試「_this」而不是「this」。我發現這是因爲編譯器生成輸出js代碼的方式。 –

這可能是因爲箭頭功能不綁定自己的這個，它設置這個變量從外部環境

參閱本 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

，並因爲實際的谷歌Chrome瀏覽器支持箭頭的功能，你可以請參閱執行箭頭功能時定義的消息...

另一方面，由於角度使用轉換器與ECMA6一起使用，因此它實際上將您的代碼轉換爲ECMA5，在這種情況下，此箭頭函數將被轉換到ecma5樂趣ction是不具有對這個變量的引用，這就是爲什麼你看到的是未定義...

一種解決方法將使用

constructor() { 
    let self = this; 
    const test =() => { 
     console.log(self.message); 
    }; 

    test(); 
    }

來源

2017-10-17 12:48:27

從TS轉換到ES5，但它是相同的原理。不幸的是，這不能工作，因爲當前上下文丟失的簡單原因，所以即使** self **變量不會是可見的。 –

當你與它失去箭頭的功能構造運行代碼上下文。

你可以做什麼時，該組件被初始化檢查的事情就是實現的OnInit和定義ngOnInit（）函數：

export class MyComponent implements OnInit { 

    private message = 'Im here!'; 

    constructor() {} 

    ngOnInit(): void { 
    const test =() => { 
     console.log(this.message); 
    }; 

    test(); 
    } 

}

來源

2017-10-17 12:51:56 HMarteau

我已經嘗試過，結果相同，請參閱http://nsa39.casimages.com/img/2017/10/17/171017032635702838.png –

我曾嘗試你的示例代碼和它運作良好，對我來說這兩個構造函數和ngOnInit變體。我可以在我的調試器中看到this的真實價值。所以代碼是正確的。您的調試器顯然不能正確解析映射文件的引用。

我注意到，當我在調試器中查看另一個變量時，與undefined這個詞相關的彈出窗口看起來與截圖中的不同。你的是一個簡單的矩形，而我的是一個矩形，底部有一個指向變量的三角形。雖然Chrome應該自動進行更新，以防萬一，請確保您使用的是最新版本。

來源

2017-10-22 04:57:25 Andrey

角CLI // //打字稿鉻調試> Arrow功能喪失方面

回答

相關問題