Lassen Sie uns darüber sprechen, wie Angular+Service die Protokollierungsfunktion verbessert

Wie kann die Protokollierungsnutzung von Angular verbessert werden? Im folgenden Artikel erfahren Sie, wie Sie die Ausgabe der Service-Verwaltungskonsole in Angular verwenden, um die Protokollierungsfunktion zu verbessern.

Verbessern Sie die Verwendung von Protokollen in Angular-Anwendungen

Angular ist ein sehr beliebtes Entwicklungsframework, und Front-End-Entwickler verwenden gerne console in ihren Anwendungen Um ihren Code zu debuggen, werden diese Debugging-Codes jedoch aufgrund der Notwendigkeit einer kontinuierlichen Bereitstellung/Bereitstellung gelöscht und gelangen nicht in die Produktionsversionsumgebung. [Verwandte Tutorial-Empfehlungen: „<code>Angular是一个非常受欢迎的开发框架，前端开发者们喜欢在应用中使用console去调试它们的代码，但是由于持续交付/部署的需要，这些调试代码会被删除，不会进入生产发布环境中。【相关教程推荐：《angular教程》】

让 Angular 帮我们实现这个功能

Angular 为我们提供了将 Services 注册到应用中的功能，使得我们可以在组件中重用一些功能。

因此，我们可以利用Service来管理我们的控制台输出，从而改进日志功能。

1 : 使用Service来管理console

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class LogService {

  constructor() {

  }
  trace(...data: any[]): void {
    console.trace(data);
  }
  log(...data: any[]): void {
    console.log(data);
  }
}

在AppComponent组件中使用它:：

logService.log('console executed from AppComponent');

上面的代码很容易理解，但是有一个问题，我们无法得知日志是在应用的哪一个组件中打印的，除非我们在日志消息中表明，例如图中的日志信息表明它来自于AppComponent组件，我们希望日志的右侧能自动表明它来自哪个组件，而不是定义整个日志系统的文件位log.service.ts:xx，并且不需要我们在日志消息中手动表明。

1.1: 使用logService.trace()

它可以用于跟踪日志的来源，看起来很不错，但实际上它会添加一些不必要的日志记录。

2: logService增强版

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class LogService {

  constructor() {

  }
  trace(source: string, ...data: any[]): void {
    console.trace(data);
  }
  log(source: string, ...data: any[]): void {
    console.log(data);
  }
}

与前面相比，增强版的logServiceAngular Tutorial

“]

🎜Lassen Sie Angular uns bei der Implementierung dieser Funktion helfen🎜🎜🎜🎜Angular stellt uns 🎜Services🎜🎜 In der Anwendung registrierte Funktionen ermöglichen uns die Wiederverwendung einiger Funktionen in Komponenten. 🎜🎜Daher können wir Service verwenden, um unsere Konsolenausgabe zu verwalten und so die Protokollierungsfunktion zu verbessern. 🎜🎜🎜1🎜🎜🎜 🎜: Verwenden Sie den Dienst, um die Konsole zu verwalten🎜🎜🎜

logService.log('AppComponent','console executed from AppComponent');

🎜inVerwenden Sie es in der AppComponent-Komponente: 🎜rrreee🎜🎜🎜Der obige Code ist leicht zu verstehen, es gibt jedoch ein Problem. Wir können nicht wissen, in welcher Komponente der Anwendung das Protokoll gedruckt wird, es sei denn, wir geben es in der Protokollnachricht an, z Wie in der Abbildung dargestellt, zeigen die Protokollinformationen an, dass sie von der AppComponent-Komponente stammen. Wir hoffen, dass auf der rechten Seite des Protokolls automatisch angegeben werden kann, von welcher Komponente es stammt, anstatt die Dateiposition des Ganzen zu definieren Protokollierungssystem log.service.ts: xx, und wir müssen es nicht manuell in der Protokollnachricht angeben. 🎜🎜🎜1.1: Verwenden Sie logService.trace()🎜🎜🎜 Es kann verwendet werden, um die Quelle des Protokolls zu verfolgen, was gut aussieht, aber tatsächlich zu unnötiger Protokollierung führt. 🎜🎜🎜2: erweiterte Version von logService🎜🎜🎜rrreee🎜Im Vergleich zur vorherigen Version erhält die erweiterte Version der Klassenmethode logService zusätzliche Parameter. 🎜rrreee🎜🎜🎜🎜sehr gut

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Angular+Service die Protokollierungsfunktion verbessert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!