如何将我的 [ngClass] 条件转移到一个单独的 ts 文件中作为所有组件的可重用代码，而不是在每个 html 文件中重复它？

Question

目前我的代码正在运行。但是，我的 [ngClass] 条件非常庞大。在 html 的许多组件中重复它使得如果需要任何更改都难以维护并且使我的代码非常混乱。

我的 html 中的示例：

 <a type="button" href="#">
        <div [ngClass]="{
           'blue-filter': runTheme==='Blue',
           'green-filter': runTheme==='Green',
           'red-filter': runTheme==='Red',
           'hydrangea-filter': runTheme==='Hydrangea',
           'sakura-filter': runTheme==='Sakura',
           'lavender-filter': runTheme==='Lavender',
           'mediterranean-filter': runTheme==='Mediterranean',
           'industrial-filter': runTheme==='Industrial',
           'minimalist-filter': runTheme==='Minimalist',
           'bohemian-filter': runTheme==='Bohemian',
           'forest-filter': runTheme==='Forest',
           'beach-filter': runTheme==='Beach',
           'sea-filter': runTheme==='Sea',
           'spring-filter': runTheme==='Spring',
           'winter-filter': runTheme==='Winter',
           'summer-filter': runTheme==='Summer',
           'autumn-filter': runTheme==='Autumn'
          }">
          <img src="./assets/iconsTopbar2px/building07.svg" />
        </div>
      </a>

      <a type="button">
        <div [ngClass]="{
           'blue-filter': runTheme==='Blue',
           'green-filter': runTheme==='Green',
           'red-filter': runTheme==='Red',
           'hydrangea-filter': runTheme==='Hydrangea',
           'sakura-filter': runTheme==='Sakura',
           'lavender-filter': runTheme==='Lavender',
           'mediterranean-filter': runTheme==='Mediterranean',
           'industrial-filter': runTheme==='Industrial',
           'minimalist-filter': runTheme==='Minimalist',
           'bohemian-filter': runTheme==='Bohemian',
           'forest-filter': runTheme==='Forest',
           'beach-filter': runTheme==='Beach',
           'sea-filter': runTheme==='Sea',
           'spring-filter': runTheme==='Spring',
           'winter-filter': runTheme==='Winter',
           'summer-filter': runTheme==='Summer',
           'autumn-filter': runTheme==='Autumn'
          }">
          <img src="./assets/iconsTopbar2px/ESS.svg" />
        </div>
      </a>

      <a type="button" routerLink="/login">
        <div [ngClass]="{
           'blue-filter': runTheme==='Blue',
           'green-filter': runTheme==='Green',
           'red-filter': runTheme==='Red',
           'hydrangea-filter': runTheme==='Hydrangea',
           'sakura-filter': runTheme==='Sakura',
           'lavender-filter': runTheme==='Lavender',
           'mediterranean-filter': runTheme==='Mediterranean',
           'industrial-filter': runTheme==='Industrial',
           'minimalist-filter': runTheme==='Minimalist',
           'bohemian-filter': runTheme==='Bohemian',
           'forest-filter': runTheme==='Forest',
           'beach-filter': runTheme==='Beach',
           'sea-filter': runTheme==='Sea',
           'spring-filter': runTheme==='Spring',
           'winter-filter': runTheme==='Winter',
           'summer-filter': runTheme==='Summer',
           'autumn-filter': runTheme==='Autumn'
          }">
          <img src="./assets/iconsTopbar2px/arrowCircleBrokenRight01.svg" />
        </div>
      </a>

如何创建单个打字稿文件或服务文件以将条件放入其中？

请注意，我的 runTheme 正在从服务 - ColorSchemeService 中检索数据。

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ColorSchemesService } from '../color-schemes.service';

@Component({
  selector: 'app-top-panel',
  templateUrl: './top-panel.component.html',
  styleUrls: ['./top-panel.component.css']
})


export class TopPanelComponent {
  runTheme: any;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private colorSchemes: ColorSchemesService,
  ) {
    this.colorSchemes.data$.subscribe(data => {
      this.runTheme = data;
    })
  }

我仍然不确定如何正确格式化我的代码。尝试创建一个新的 colorFilter.ts 文件并链接到我的组件的 ts 和 html，但遇到了错误。

import { ColorSchemesService } from "./color-schemes.service";

export const colorFilter = [
  runTheme: any;

constructor(
  private colorSchemes: ColorSchemesService,
) {
  this.colorSchemes.data$.subscribe(data => {
    this.runTheme = data;
  })
}

  blue-filter04: runTheme === 'Blue',
  green-filter04: runTheme === 'Green',
  red-filter04: runTheme === 'Red',
  hydrangea-filter04: runTheme === 'Hydrangea',
  sakura-filter04: runTheme === 'Sakura',
  lavender-filter04: runTheme === 'Lavender',
  mediterranean-filter04: runTheme === 'Mediterranean',
  industrial-filter04: runTheme === 'Industrial',
  minimalist-filter04: runTheme === 'Minimalist',
  bohemian-filter04: runTheme === 'Bohemian',
  forest-filter04: runTheme === 'Forest',
  beach-filter04: runTheme === 'Beach',
  sea-filter04: runTheme === 'Sea',
  spring-filter04: runTheme === 'Spring',
  winter-filter04: runTheme === 'Winter',
  summer-filter04: runTheme === 'Summer',
  autumn-filter04: runTheme === 'Autumn'
]

任何指导将不胜感激！

Answer 1

你可以使用这样的指令：

import { Directive, HostBinding, OnInit } from '@angular/core';

@Directive({
  selector: '[appMyDirective]',
})
export class MyDirectiveDirective implements OnInit {
  filterclass = '';
  runTheme = 'Green';
  @HostBinding('class') filterClass = 'blue-filter04';
  constructor() {}

  ngOnInit(): void {
    switch (this.runTheme) {
      case 'Blue':
        this.filterClass = 'blue-filter04';
        break;
      case 'Green':
        this.filterClass = 'green-filter04';
        break;
      case 'Red':
        this.filterClass = 'red-filter04';
        break;
    }
  }
}

这是一个例子这里