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

【问题标题】：Calling Angular2 Component methods from Console in Production mode在生产模式下从控制台调用 Angular2 组件方法
【发布时间】：2016-11-25 16:28:00
【问题描述】：

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

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

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

【问题讨论】：

标签： angular

【解决方案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 变量。

【讨论】：

【解决方案2】：

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

这可以通过 URL 哈希中的自定义标志来处理

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(...);

或者通过在window.name 中添加一个标志，就像在AngularJS 中的reloadWithDebugInfo 中所做的那样。

【讨论】：

【解决方案3】：

你已经成功了 :) 你可以通过ng.probe($0).componentInstance访问componentInstance

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

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

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

【讨论】：

我刚刚注意到您试图在开发模式之外执行此操作 - 不幸的是，启用 prod 模式的一部分会禁用上面使用的开发工具。它必须在 dev 中完成
没错！寻找类似的东西让我例如。切换一些标志，从控制台更改我的应用程序中的日志记录级别

【解决方案4】：

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

ng.probe($('component_tag-name')).componentInstance.fn()

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

【讨论】：

ng 变量只能在开发模式下访问。问题是关于生产模式。