Question

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

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

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

Answer 1

据我所知，没有内置方法。

这可以通过URL哈希

中的自定义标志来处理

cudaFree

或者将标记放入import {enableProdMode} from '@angular/core'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; const DEV_MODE = 'DEV_MODE'; const DEV_MODE_REGEXP = new RegExp('(?:^|;)' + DEV_MODE + '$'); const IS_DEV_MODE = DEV_MODE_REGEXP.test(window.location.hash); if (window.ENV !== 'prod' || IS_DEV_MODE) { if (IS_DEV_MODE) { window.location.hash = window.location.hash.replace(DEV_MODE_REGEXP, ''); } } else { enableProdMode(); } platformBrowserDynamic().bootstrapModule(...);，就像在AngularJS中的reloadWithDebugInfo中完成一样。

Answer 2

你已经在那里了:) 您可以使用ng.probe($0).componentInstance

访问componentInstance

从那里你可以使用公共函数和改变变量，你只需要在使用下面的函数时调用变化检测

ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()

如果您想了解更多信息，我会从http://juristr.com/blog/2016/02/debugging-angular2-console/获取此信息：）

Answer 3

您可以在较低的环境中复制相同的内容，然后进行调试。

ng.probe（$（'component_tag-name'））。componentInstance.fn（）

要使用$ 0，您首先需要扩展该元素，否则控制台将告诉您$ 0未定义。

Answer 4

以下是在生产模式下（至少在 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 变量。

在生产模式下从控制台调用Angular2组件方法

4 个答案: