從 Angular 中的瀏覽器控制台調用 function

Question

我在 Angular 組件中有一個 function，可以說：

setDevMode(mode:string):void {
    this.devMode = mode;
}

我將如何 go 從瀏覽器控制台運行它？

Answer 1

如果此 function 在閉包內，則無法從控制台調用。

否則，您只需執行functionName(); 並點擊返回。

Answer 2

要從組件實例調用方法，您需要獲取對組件實例的引用。 您可以在 Angular 9+ 中使用ng全局變量執行此操作，方法是使用其getComponent function。

為了使用它，您需要訪問由您的組件實例創建的 html 元素。 您可以在 Chrome 的 Elements 選項卡中找到它（firefox 中的“Inspector”），右鍵單擊該元素並選擇“Store as global variable”（firefox 中的“Use in console”）。 您現在在控制台中有一個變量，您可以將其發送到getComponent function，例如temp1 ：

const myCompInstance = ng.getComponent(temp1)

組件有了這個，你現在可以像這樣調用方法：

myCompInstance.setDevMode("some_mode")

請注意，您可能必須在元素上運行ng.applyChanges才能看到 UI 更新，如下所示：

ng.applyChanges(temp1)