如何在 Angular 中創建全局 ngClass 方法？

Question

使用 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>

Answer 1

我看到了三種可能的解決方案：

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 對其沒有影響），那么它的事件效率更高。

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

您可以創建一個服務，但它更像是一個實用程序 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 中會使它們更易搖樹。

Answer 5

對於您提供的示例，帶有 Input 的屬性指令將是 go 的方式。

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