0
votes

Comment créer une méthode globale NgClass en angulaire?

Utiliser angulaire 7, j'ai créé une méthode NgClass dans mon composant .TS Fichier et fonctionne bien.

Ce que je veux, c'est utiliser cette même méthode dans tous mes composants sans réécrire le code, mais je suis Je ne sais pas où ce code est censé aller. J'ai essayé de le mettre dans app.component.ts, mais cela n'a pas fonctionné.

Où puis-je mettre une méthode NgClass afin qu'il soit global à tous mes composants?

code est assez simple. Il attribue simplement une classe à une somme d'argent à la couleur verte si elle est positive et rouge si elle est négative. xxx

et dans le HTML: xxx


2 commentaires

Salut, pouvez-vous partager le code?


Le code est assez simple. Je vais l'ajouter ci-dessus.


5 Réponses :


0
votes

Vous pouvez utiliser des services

vous commencez par créer un service P> xxx pré>

et injecter votre service dans votre module et utilisez-le p>

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

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


0 commentaires

0
votes

Vous pouvez créer un fichier cool-styles.ngclass.ts code> par exemple et exporter votre code là-bas.

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


0 commentaires

0
votes

Vous pouvez créer un service, mais cela ressemble plus à une fonction d'utilité. Je créerais une application.Utils.ts dans l'application / répertoire. xxx

puis dans votre composant, xxx

Vous pouvez également créer des apputils La classe qui possède plusieurs fonctions utilitaires statiques, mais la création de fonctions distinctes au lieu de les avoir dans une classe les rend plus shakables d'arbres.


0 commentaires

1
votes

Je vois trois solutions possibles:

1) Créez une classe pour étendre xxx

puis l'étendre dans ces composants dont vous avez besoin pour réutiliser la méthode xxx

2) Créez une fonction exportée, puis enregistrez une référence à celle-ci dans le composant xxx

3) Utilisez un tuyau xxx

puis utilisez-le dans le modèle du composant xxx

dans cette approche si vous comptez sur l'état de l'application, vous devez explicitement dire à l'angulaire que Ce tuyau est Imvre .

IMHO le Le tuyau est préférable. Et si c'est pur (s'appuie uniquement sur l'état de données et de l'application fourni n'a aucun impact sur celui-ci), il est plus efficace de l'événement.


0 commentaires

0
votes

Pour l'exemple que vous avez fourni, une directive d'attribut avec une entrée serait la voie à suivre.

DOCS: https://angular.io/guide/attribute-Directives#Pass-values-te-thththe-Directive-Avithan-input-Data-Binding


1 commentaires

peut ajouter des experts plus tard