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

Question

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

我想要的是在我的所有组件中使用相同的方法，而不重新编写代码，但我不确定代码应该放在哪里。我试着把它放在app.component.ts中，但没用。

我可以把ngClass方法放在哪里，这样它对我的所有组件都是全局的？

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

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

以及在html:中

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

Answer 1

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

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这个管道是不纯净的。

IMHO最好是管道。如果它是纯粹的(只依赖于提供的数据，应用程序的状态对它没有影响(，那么它的事件效率会更高。

Answer 2

您可以使用服务

您首先要创建一个服务

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 { }

希望能有所帮助。

Answer 3

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

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

这里的文件可以包括用于逻辑检查的导入，或者从env-var中进行其他设置。

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

Answer 4

您可以创建服务，但它更像是一个实用函数。我会在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类，但创建单独的函数而不是将它们放在一个类中会使它们更易于树动摇。

Answer 5

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

文档：https://angular.io/guide/attribute-directives#pass-值绑定到具有输入数据绑定的指令中