Escriba el contenedor console.log para Angular 2 en TypeScript

El registro es muy importante para las aplicaciones, lo que ayuda a depurar y conocer cualquier problema de la aplicación en producción. Angular tiene que ver con los servicios y se puede inyectar en otros componentes para que se pueda crear un servicio de registro, que actúa como un contenedor para la función console.log.

El servicio de registro se puede extender a más acciones con registros, como enviarlos a un servidor remoto para análisis o una base de datos. Este tutorial demostrará cómo se pueden usar los servicios en Angular para crear un contenedor para la función console.log en TypeScript.

Escriba el contenedor console.log para Angular 2 en TypeScript

Como Angular consta de servicios, se puede crear un nuevo servicio de registro. Este servicio se puede ampliar posteriormente para otros casos de uso, como análisis y observabilidad.

servicios/log.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class CustomLogService {
    log(msg: string) {
        console.log(new Date() + ": " + msg);
    }
}

Por lo tanto, CustomLogService actúa como un envoltorio alrededor de console.log y puede usarse en otros componentes de Angular. Para inyectar la clase CustomLogService, podemos definir un componente que puede usar un archivo HTML.

pruebas/registro.componente.html

<button (click)="wrapLog()">Log</button>

pruebas/log.component.ts

import { Component } from "@angular/core";
import { CustomLogService } from "../services/log.service";

@Component({
  selector: "log-comp",
  templateUrl: "./log.component.html"
})
export class LogComponent {
  constructor(private logger: CustomLogService) {}

  wrapLog(): void {
    this.logger.log("A custom log method");
  }
}

Es necesario definir otro app.module.ts.

aplicación.módulo.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { CustomLogService } from "./services/log.service";
import { LogComponent } from "./tests/log.component";

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, LogComponent],
  bootstrap: [AppComponent, LogComponent],
  providers: [CustomLogService]
})
export class AppModule {}

Ahora el selector log-comp definido en tests/log.component.ts se puede usar como <log-comp></log-comp> para mostrar un botón HTML, que cuando se hace clic, se registra en la consola - Un método de registro personalizado como se define en tests/log.component.ts.

Producción:

Aquí está la demostración para el código fuente completo.