angular - 在生产模式下从控制台调用 Angular2 Component 方法

Question

有没有办法在生产模式下调用组件或服务方法？

我知道可以使用 ng.probe 和 Angular2 调试应用程序 Augury 调试应用程序:https://augury.angular.io/

但是，这些仅在开发模式下有效。

Answer 1

以下是您如何在生产模式下(至少在 Angular 9 中)从控制台访问组件对象。

首先你需要找到对应于 Angular 组件的 HTML 元素。您可以使用类似 window.getAllAngularRootElements()[0].getElementsByTagName('my-component-tag')[0] 的方法。或者您也可以先在 Inspector 工具中找到并选择组件，然后使用特殊变量 $0。

然后，如果这个元素对应于某个 Angular 组件，那么它将附加一个特殊的 __ngContext__ 属性。它包含 Angular 使用的不同组件属性的数组。数组的一项是组件对象本身。项目的索引可能不同，因此您需要自己检查 __ngContext__ 数组以找到它。

即，简单地说，做类似的事情:

o = window.getAllAngularRootElements()[0].getElementsByTagName('my-component-tag')[0].__ngContext__[42];

(假设 42 是您的情况下的正确索引)然后根据需要使用 o 变量。