créer une fonction globale, qui pourrait être utilisé dans angulaire 4 modèle

Je veux créer une réutilisables fonction qui peut être utilisée dans angulaire de modèles. J'ai créé une fonction comme:

 export function stringSplit(string : string, separator : string = '/') : any {
    return string.split(separator);
}

J'ai essayé d'ajouter dans le modèle comme celui-ci:

<p> stringSplit('hello/user') </p>

Mais j'obtiens cette erreur:

ERROR TypeError: _co.stringSplit is not a function

Je ne suis pas sûr de savoir comment nous pouvons créer et utiliser des fonctions globales dans angulaire.

Peut-on effectuer cette opération dans angulaire?

Quelle est la meilleure solution dans cette situation?

  • à l'échelle mondiale @Injectable de service et d'utiliser les méthodes
  • créer un service avec @Injectable({ providedIn: 'root' }). ajouter ensuite les méthodes de là. maintenant importer le service dans les composants requis, de sorte que vous pouvez utiliser ces méthodes.
InformationsquelleAutor PaladiN | 2017-11-21
  1. 7

    La réponse est que vous ne devrait pas. L'Injection de dépendance est un puissant outil fourni par Angulaire avec le seul but de la fonctionnalité de partage à travers des composants sans le maintien d'une portée mondiale. Ce que vous devez vraiment faire est de créer un service, ajouter une méthode à elle, d'injecter votre service à tout composant dont il a besoin, et à l'appeler là.

    À en juger par votre question, il serait agréable d'avoir un tuyau pour effectuer l'opération dont vous avez besoin. Les tuyaux sont utilisés pour manipuler des données à l'intérieur de n'importe quel modèle (la prise de fonction pratiquement global pour tous les modèles qui appartiennent à des composants qui appartiennent à des modules qui soit de déclarer ou de l'importation de la conduite). Vous pouvez écrire ceci:

    @Pipe({name: 'splitString'})
export class SplitString implements PipeTransform {
  transform(value: string, separator: string): string[] {
     return value.split(separator);   
  }
}

    Et dans votre code html: 

    <p>{{ myString | splitString : ',' }} </p>

    Lire plus au sujet de tuyaux ici.

    • Je suis conscient des tuyaux mais je suis à la recherche d'autres méthodes plutôt que des tuyaux. Comme j'ai besoin de faire quelques manipulations avant de se transformer à l'aide de tuyaux.
    • Vous pouvez combiner les tuyaux
    • Alors, comment arrivez-vous à concilier les tuyaux dans le modèle sans personnel supplémentaire tuyau??
    • Il semble que vous avez XY problème. Si combinant des tuyaux est un problème réel, il doit être précisé dans la question. Vous pouvez combiner les tuyaux comme {{ 'foo' | splitString | bar | baz }}. C'est pourquoi ils sont appelés tuyaux.
    • J'ai fait la même mais là j'avais ajouté de la pipe à l'emplacement incorrect. De toute façon merci.
    InformationsquelleAutor Armen Vardanyan
  2. 2

    En général, il est considéré comme une mauvaise pratique.

    Mais si vous devez utiliser cette fonction, vous pouvez simplement l'ajouter en tant que membre à l'intérieur de votre composant.
    Quelque part dans le code:

    export function stringSplit(string : string, separator : string = '/') : any {
    return string.split(separator);
}

    Dans votre composant:

    import {stringSplit} from '....'
...
class MyComponent {
  public stringSplit = stringSplit;
}

    Puis dans modèle:

    <p> stringSplit('hello/user') </p>

    Mais comme je l'ai déjà mentionné, c'est une mauvaise pratique. Pensez à utiliser le service/la pipe à la place.

    InformationsquelleAutor meltedspark
  3. 1

    Fonctions globales ne peut pas et ne doit pas être utilisé dans les modèles. Si stringSplit doit être utilisé dans le modèle, il doit être une propriété de composant. L'héritage peut être utilisé afin de le rendre disponible dans de multiples composants et de les garder au SEC:

    abstract class BaseComponent {
  stringSplit(...) { ... }
}

@Component(...)
class FooComponent extends BaseComponent { ... }

    Et la bonne façon de le faire est de faire stringSplit une pipe, parce que c'est ce que les tuyaux sont pour. stringSplit est fonction pure, et pure pipe (par défaut) permet d'éviter la détection de changement lors de la pipe entrées sont inchangés et le tuyau de sortie devrait être la même, par exemple,{{ 'foo' | stringSplit }}. Alors que {{ stringSplit('foo') }} pour exécuter une fonction d'assistance à chaque changement de cycle de détection.

    InformationsquelleAutor Estus Flask