如何在Typescript中为Angular2编写console.log包装程序

How to write console.log wrapper for Angular2 in Typescript?

本文关键字：console log 包装 程序 编写 Angular2 Typescript 中为      更新时间：2023-09-26

有没有一种方法可以编写一个全局自制的mylogger函数，我可以在Angular2 typescript项目中为我的服务或组件使用它，而不是console.log函数？

我想要的结果是这样的：

mylogger.ts

function mylogger(msg){
    console.log(msg);
};

user.service.ts

import 'commons/mylogger';
export class UserService{
  loadUserData(){
    mylogger('About to get something');
    return 'something';
  };
};

您可以将其作为服务编写，然后使用依赖项注入使该类可用于组件。

import {Injectable, provide} from 'angular2/core';
// do whatever you want for logging here, add methods for log levels etc.
@Injectable()
export class MyLogger {
  public log(logMsg:string) {
    console.log(logMsg); 
  }
}
export var LOGGING_PROVIDERS:Provider[] = [
      provide(MyLogger, {useClass: MyLogger}),
    ];

您希望通过将其添加到bootstrap的providers数组中，将其放置在应用程序的顶级注入器中。

import {LOGGING_PROVIDERS} from './mylogger';
bootstrap(App, [LOGGING_PROVIDERS])
  .catch(err => console.error(err));

这里有一个非常简单的例子：http://plnkr.co/edit/7qnBU2HFAGgGxkULuZCz?p=preview

接受答案给出的示例将打印记录器类MyLogger的日志，而不是实际记录的类的日志。

我修改了提供的示例，以便从调用MyLogger.log()的确切行打印日志，例如：

get debug() {
    return console.debug.bind(console);
}
get log() {
    return console.log.bind(console);
}

我在这里找到了方法：https://github.com/angular/angular/issues/5458

Plunker：http://plnkr.co/edit/0ldN08?p=preview

根据developers.mozilla中的文档，

The bind() method creates a new function that, when called, has its
this keyword set to the provided value, with a given sequence of 
arguments preceding any provided when the new function is called.

有关bind的更多信息，请点击此处：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

如果您想在组件中使用"console.log"函数，您可以这样做：

import { Component, OnInit } from '@angular/core';
var output = console.log;
@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
  printFunction(term: string): void {
    output('foo');
  }
}

在您的主服务上使用控制台怎么样，这样我们就可以有条件地自定义和应用console.log：

myComponent.ts

export class myComponent implements OnInit {
 constructor(
        private config: GlobalService
    ) {}
    ngOnInit() {
       this.config.log('func name',{a:'aval'},'three');
    }
}

global.service.ts

@Injectable()
export class GlobalService {
   constructor() { }
   this.prod = true;
   public log(one: any, two?: any, three?: any, four?: any) {
        if (!this.prod) {
             console.log('%c'+one, 'background:red;color:#fff', two, three, four);
        }
    }
}

（注意：在这个例子中，第一个参数应该是字符串）；

用于切换控制台。log ON''OFF：

logger.service.ts:

import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
private oldConsoleLog = null;
enableLogger(){
    if (this.oldConsoleLog == null) { return; }
    window['console']['log'] = this.oldConsoleLog;
}
disableLogger() {
    this.oldConsoleLog = console.log;
    window['console']['log'] = function () { };
};
}

应用程序组件.ts:

@Component({
  selector: 'my-app',
  template: `your templ;ate`
})
export class AppComponent {
constructor(private loggerService: LoggerService) {
    var IS_PRODUCTION = true;
    if ( IS_PRODUCTION ) {
        console.log("LOGGER IS DISABBLED!!!");
        loggerService.disableLogger();
    }
}
}

我根据此处提供的信息创建了一个记录器

目前它非常基本（hacky：-），但它保持了行号

@Injectable()
export class LoggerProvider {
constructor() {
  //inject what ever you want here
}
public getLogger(name: string) {
  return {
    get log() {
      //Transform the arguments 
      //Color output as an example
      let msg = '%c[' + name + ']';
      for (let i = 0; i < arguments.length; i++) {
        msg += arguments[i]
      }
      return console.log.bind(console, msg, 'color:blue');
    }
  }
 }
}

希望这能帮助

键入更安全（ish）的版本，带angular 4，typescript 2.3

logger.service.ts

import { InjectionToken } from '@angular/core';
export type LoggerService = Pick<typeof console,
                                 'debug' | 'error' | 'info' | 'log' | 'trace' | 'warn'>;
export const LOGGER_SERVICE = new InjectionToken('LOGGER_SERVICE');
export const ConsoleLoggerServiceProvider = { provide: LOGGER_SERVICE, useValue: console };

my.module.ts

// ...
@NgModule({
  providers: [
    ConsoleLoggerServiceProvider,
    //...
  ],
// ...

my.service.ts

// ...
@Injectable()
export class MyService {
  constructor(@Inject(LOGGER_SERVICE) log: LoggerService) {
//...

现在NPM上有一个angular2记录器组件，它支持日志级别。https://www.npmjs.com/package/angular2-logger

相关文章：