Как создать глобальный метод ngClass в Angular? - PullRequest
Новая
       14

Как создать глобальный метод ngClass в Angular?

0 голосов
/ 07 ноября 2019

Используя Angular 7, я создал метод ngClass в своем компонентном файле .ts и прекрасно работает.

Я хочу использовать один и тот же метод во всех моих компонентах без переписывания кода, ноЯ не уверен, куда этот код должен идти. Я пытался поместить его в app.component.ts, но это не сработало.

Где можно разместить метод ngClass, чтобы он был глобальным для всех моих компонентов?

Код довольно прост,Он просто присваивает классу денежную сумму, которая окрашивает его в зеленый цвет, если он положительный, и в красный цвет, если он отрицательный. 

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

и в html: 

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

Ответы [ 5 ]

1 голос
/ 07 ноября 2019

Я вижу три возможных решения:

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, что этот канал нечистый .

ИМХО канал предпочтительнее. И если он чистый (опирается только на предоставленные данные и на него не влияет состояние приложения), то это событие более эффективное.

0 голосов
/ 07 ноября 2019

В приведенном вами примере, путь директивы атрибута с Input будет подходящим.

Документы: https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding

0 голосов
/ 07 ноября 2019

Например, вы можете создать файл cool-styles.ngclass.ts и экспортировать туда свой код. 

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

ваш файл может включать в себя импорт для логических проверок или некоторые другие настройки, например, из env var.

Если это не то, что вы ищете, вы можете рассмотреть возможность использования Сервиса для предоставления доступа к ngClass в любом месте.

0 голосов
/ 07 ноября 2019

Вы можете создать Сервис, но это больше похоже на служебную функцию. Я бы создал app.utils.ts в app / directory. 

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

Затем в вашем Компоненте 

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

Вы также можете создать класс AppUtils, который имеет несколько статических служебных функций,но создание отдельных функций вместо их включения в класс делает их более древовидными.

0 голосов
/ 07 ноября 2019

вы можете использовать сервисы

вы начинаете с создания сервиса 

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

надеждаэта помощь.

...