如何在angular app中实现日志数据的多彩显示

import { NgModule } from '@angular/core';
import { LoggerModule, LoggerService } from 'ngx-logger';

@NgModule({
  imports: [LoggerModule],
  providers: [LoggerService],
})
export class AppModule { }

import { Component } from '@angular/core';
import { LoggerService } from 'ngx-logger';

@Component({
  selector: 'app-example',
  template: '<button (click)="logMessage()">Log Message</button>',
})
export class ExampleComponent {
  constructor(private logger: LoggerService) { }

  logMessage() {
    this.logger.debug('Debug message');
    this.logger.info('Info message');
    this.logger.warn('Warning message');
    this.logger.error('Error message');
  }
}

<div *ngFor="let log of logger.logs" [ngClass]="getLogClass(log.level)">
  {{ log.message }}
</div>

getLogClass(level: string): string {
  switch (level) {
    case 'debug':
      return 'debug-log';
    case 'info':
      return 'info-log';
    case 'warn':
      return 'warn-log';
    case 'error':
      return 'error-log';
    default:
      return '';
  }
}

.debug-log {
  color: blue;
}

.info-log {
  color: green;
}

.warn-log {
  color: orange;
}

.error-log {
  color: red;
}