Schreiben Sie den console.log-Wrapper für Angular 2 in TypeScript

Die Protokollierung ist für Anwendungen sehr wichtig, was beim Debuggen hilft und Anwendungsprobleme in der Produktion erkennt. Angular dreht sich alles um Dienste und kann in andere Komponenten injiziert werden, sodass ein Protokollierungsdienst erstellt werden kann, der als Wrapper für die Funktion console.log fungiert.

Der Protokollierungsdienst kann auf weitere Aktionen mit Protokollen erweitert werden, z. B. das Senden an einen Remote-Server für Analysen oder eine Datenbank. Dieses Tutorial zeigt, wie Dienste in Angular verwendet werden können, um einen Wrapper für die Funktion console.log in TypeScript zu erstellen.

Schreiben Sie console.log Wrapper für Angular 2 in TypeScript

Da Angular aus Diensten besteht, kann man einen neuen Logging-Dienst erstellen. Dieser Service kann später für weitere Anwendungsfälle wie Analytics und Observability erweitert werden.

services/log.service.ts

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

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

Somit fungiert CustomLogService als Wrapper um console.log und kann in anderen Angular-Komponenten verwendet werden. Zum Einfügen der Klasse CustomLogService können wir eine Komponente definieren, die eine HTML-Datei verwenden kann.

tests/log.component.html

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

tests/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");
  }
}

Ein weiteres app.module.ts muss definiert werden.

app.module.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 {}

Jetzt kann der in tests/log.component.ts definierte Selektor log-comp als <log-comp></log-comp> verwendet werden, um eine HTML-Schaltfläche anzuzeigen, die sich beim Klicken an der Konsole anmeldet - Eine benutzerdefinierte Protokollmethode, wie in tests/log.component.ts definiert.

Ausgang:

Hier ist die Demo für den vollständigen Quellcode.