如何在 Angular 中创建全局 ngClass 方法？答案

【问题标题】：How to create a global ngClass method in Angular?如何在 Angular 中创建全局 ngClass 方法？
【发布时间】：2020-03-04 08:26:29
【问题描述】：

使用 Angular 7，我在我的组件 .ts 文件中创建了一个 ngClass 方法，效果很好。

我想要的是在我的所有组件中使用相同的方法，而无需重新编写代码，但我不确定该代码应该去哪里。我尝试将其放入 app.component.ts ，但没有奏效。

我可以在哪里放置一个 ngClass 方法，以便它对我的所有组件都是全局的？

代码非常简单。它只是将一个类分配给一个金额，如果它是正数则将其着色为绿色，如果它是负数则将其着色为红色。

moneyClass(amount) {
    if(amount>=0)
        return 'moneyGreen';
    else
        return 'moneyRed';
}

在 html 中：

    <div [ngClass]="moneyClass(amount)">{{amount}}</div>

【问题讨论】：

你好，可以分享一下代码吗？
代码很简单。我会在上面添加它。

标签： angular ng-class

【解决方案1】：

对于您提供的示例，可以使用带有 Input 的属性指令。

文档：https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding

【讨论】：

以后可以添加示例

【解决方案2】：

我看到了三种可能的解决方案：

1) 创建一个类来扩展

export class MyNgClass {
  ngClassHandler() {}
}

然后在那些你需要重用方法的组件中扩展它

export class MyComponent extends MyNgClass {}

2) 创建一个导出函数，然后在组件中保存对它的引用

export function ngClassHandler() {}

export class MyComponent {
  handler = ngClassHandler;
}

3) 使用管道

@Pipe({
  name: 'myPipe'
})
export class MyPipe implements PipeTransform {
  transform(data: any): any {
    // place your logic here
  }
}

然后在组件的模板中使用它

<div [ngClass]="data | myPipe"></div>

在这种方法中，如果你依赖应用的状态，你必须明确告诉 Angular 这个管道是impure。

恕我直言，管道是可取的。如果它是纯的（仅依赖于提供的数据并且应用程序的状态对其没有影响），那么它的事件效率会更高。

【讨论】：

【解决方案3】：

您可以创建一个服务，但它更像是一个实用功能。我会在 app/ 目录中创建一个 app.utils.ts。

export function getClass(...) {
    return ....
}

然后在你的组件中，

import {getClass} from 'app.utils'
...
export class XYZComponent {
   public getClass = getClass // Then you can use getClass in template
}

您还可以创建具有多个静态实用程序函数的 AppUtils 类，但是创建单独的函数而不是将它们放在一个类中会使它们更易于摇树。

【讨论】：

【解决方案4】：

例如，您可以创建一个文件cool-styles.ngclass.ts 并在那里导出您的代码。

export const CoolStyles = {
 "someclass" : true,
 "bg-white" : false
};

例如，您的文件可能包含用于逻辑检查的导入或来自 env var 的一些其他设置。

如果这不是您想要的，您可以考虑使用服务来提供对任何地方的 ngClass 的访问。

【讨论】：

【解决方案5】：

您可以使用服务

从创建服务开始

export class CSSClassProvider{

   constructor() { }

   getDangerClass(params...) {
         return  { state: "rejected" }
   }
}

在你的模块中注入你的服务并使用它

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

   providers:    [ CSSClassProvider ],
 })
 export class AppModule { }

希望有所帮助。

【讨论】：