[英]How to create a global ngClass method in Angular?
使用 Angular 7,我在 component.ts 文件中创建了一个 ngClass 方法,效果很好。
我想要的是在我的所有组件中使用相同的方法而不重写代码,但我不确定该代码应该在哪里 go。 我尝试将它放在 app.component.ts 中,但没有奏效。
我可以在哪里放置一个 ngClass 方法,以便它对我的所有组件都是全局的?
代码非常简单。 它只是将 class 分配给金额,如果它是正数则将其着色为绿色,如果它是负数则将其着色为红色。
moneyClass(amount) {
if(amount>=0)
return 'moneyGreen';
else
return 'moneyRed';
}
在 html 中:
<div [ngClass]="moneyClass(amount)">{{amount}}</div>
我看到了三种可能的解决方案:
1)创建一个class来扩展
export class MyNgClass {
ngClassHandler() {}
}
然后在你需要重用该方法的那些组件中扩展它
export class MyComponent extends MyNgClass {}
2) 创建一个导出的 function 然后在组件中保存对它的引用
export function ngClassHandler() {}
export class MyComponent {
handler = ngClassHandler;
}
3) 使用 pipe
@Pipe({
name: 'myPipe'
})
export class MyPipe implements PipeTransform {
transform(data: any): any {
// place your logic here
}
}
然后在组件的模板中使用它
<div [ngClass]="data | myPipe"></div>
在这种方法中,如果您依赖应用程序的 state 您必须明确告诉 Angular 这个 pipe 是不纯的。
恕我直言,pipe 更可取。 如果它是纯的(仅依赖于提供的数据并且应用程序的 state 对其没有影响),那么它的事件效率更高。
您可以使用服务
你首先创建一个服务
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 { }
希望有所帮助。
例如,您可以创建一个文件cool-styles.ngclass.ts
并在那里导出您的代码。
export const CoolStyles = {
"someclass" : true,
"bg-white" : false
};
例如,您在此处的文件可能包括用于逻辑检查的导入或来自 env var 的一些其他设置。
如果这不是您想要的,您可以考虑使用服务来提供对任何地方的 ngClass 的访问。
您可以创建一个服务,但它更像是一个实用程序 function。 我会在 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
}
您还可以创建具有多个 static 实用程序函数的 AppUtils class,但创建单独的函数而不是将它们放在 class 中会使它们更易摇树。
对于您提供的示例,带有 Input 的属性指令将是 go 的方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.