从 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)