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，但打字稿不能执行此操作，因此您可以在构造函数中使用eval内置的javascript，该函数将字符串评估为javascript。因此，在构造函数或服务中，您可以执行constructor(){eval("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) {
          eval("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在控制台中访问服务。

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

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

1 个答案: