从浏览器控制台以角度 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 的定义，打字稿不会让您这样做。相反，您可以使用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 在控制台中访问您的服务。

另外，请务必删除这条生产线，因为它可能会导致安全问题。