angular - 在 Angular 6中从浏览器控制台调用服务功能

Question

我刚刚对services中的某些方法进行了一些更改，并想查看更改是否正常工作，但是我想知道是否有办法，而不是创建一个类并手动对其进行测试。在chrome的控制台中调用功能。

我已遵循this示例来实现记录器服务，并将其添加到下面已经创建的jwt service中。

不幸的是，我没有在应用程序中对该错误进行任何实现，因此我无法真正直接对其进行测试。我想检查两个条件是否都正常运行。我检查了this答案，但是当我自己尝试时，它给了我null错误(可能是因为这需要组件并且我想测试服务)。

举一个例子，这是我的类，以及一个方法，我想在控制台中进行测试:

Jwt.service.ts

import { Injectable } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { LoggerService } from "src/app/services/logger/logger.service";
/**
* Injects the JSON web token service in the project
*/
@Injectable({
  providedIn: 'root'
})

/**
* This service is responsible for management of the jwt token, which would be used
* for authentication/authorization purposes. The service includes methods to save, delete
* and retrieve the token
*/
export class JwtService {


  constructor(
    private translate: TranslatePipe,
    private logger: LoggerService) { }

  /**
   * This method fetches the token from local storage and returns it.
   *
   * @method getToken
   * @return
   */
  getToken(): string {
    var token = window.localStorage['jwtToken'];
    if (token !== undefined) {
      return token;
    } else {
      this.logger.invokeConsoleMethod('error', this.translate.transform("generic[responses][error][token][001]"));
      throw new Error(this.translate.transform("generic[responses][error][token][001]"));
    }
}

Answer 1

要在控制台中访问服务，它必须是全局变量，即在浏览器的窗口对象中。我使用一个小技巧来访问控制台中的服务类实例。

在控制台的构造函数中，您可以执行window.myService=this，但由于window的定义， typescript 无法执行该操作。相反，您可以执行window['myService'] = this。使用此功能，您可以使用myService或window.myService访问服务。

在您的情况下，它将是:

import { Injectable } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { LoggerService } from "src/app/services/logger/logger.service";
/**
* Injects the JSON web token service in the project
*/
@Injectable({
  providedIn: 'root'
})

/**
* This service is responsible for management of the jwt token, which would be used
* for authentication/authorization purposes. The service includes methods to save, delete
* and retrieve the token
*/
export class JwtService {


  constructor(
    private translate: TranslatePipe,
    private logger: LoggerService) {
          window['myService'] = this;
   }

  /**
   * This method fetches the token from local storage and returns it.
   *
   * @method getToken
   * @return
   */
  getToken(): string {
    var token = window.localStorage['jwtToken'];
    if (token !== undefined) {
      return token;
    } else {
      this.logger.invokeConsoleMethod('error', this.translate.transform("generic[responses][error][token][001]"));
      throw new Error(this.translate.transform("generic[responses][error][token][001]"));
    }
}

然后，您可以使用 myService或 window.myService在控制台中访问您的服务。

另外，请确保删除此生产线，因为这可能会导致安全问题。