web-dev-qa-db-fra.com

Comment accéder à une constante dans un composant et un service Angular 2?

J'ai un fichier de constantes constants.ts:

export const C0NST = "constant";

J'y accède dans un service some.service.ts comme suit:

import { C0NST } from './constants';

console.log(C0NST); // "constant"

Cependant, lorsque j'y accède dans un modèle de composant:

some.component.ts:

import { C0NST } from './constants';

some.component.html:

{{ C0NST }} <!-- Outputs nothing -->

Cependant, définir un membre dans la classe de composant fonctionne:

some.component.ts

public const constant = C0NST;

some.component.html

{{ constant }} <!-- constant -->

Je ne comprends pas pourquoi j'ai pu accéder à la constante importée directement dans la classe de service, mais pas dans le modèle de composant, même si je l'ai importée dans la classe de composant.

angulartypescript
43
Karmasakshi Goyal

Dans Angular2, le modèle ne peut accéder qu'aux champs et aux méthodes de la classe de composant. Tout le reste est interdit. Cela inclut les éléments visibles par la classe de composants.

La solution consiste à insérer un champ dans le composant, qui fait simplement référence à la constante et à l'utiliser à la place.

C'est l'une des limites de la conception, mais vous devriez peut-être mieux comprendre pourquoi vous avez besoin d'une constante dans le modèle. Généralement, ces composants sont utilisés par les composants eux-mêmes, ou les services, mais pas le modèle.

43
Horia Coman

Etant donné que dans le modèle du composant, vous ne pouvez utiliser que les attributs de la classe du composant, vous ne pouvez pas utiliser directement de constantes externes (ou de variables externes).

La manière la plus élégante que j'ai trouvée jusqu'à présent est la suivante:

import { MY_CONSTANT } from '../constants';

@Component({
  // ...
})
export class MyTestComponent implements OnInit {

  readonly MY_CONSTANT = MY_CONSTANT;

  // ...
}

qui crée simplement un nouvel attribut MY_CONSTANT dans la classe de composants. En utilisant en lecture seule , nous nous assurons que le nouvel attribut ne peut pas être modifié.

Ce faisant, dans votre modèle, vous pouvez maintenant utiliser:

{{ MY_CONSTANT }}

24
Francesco Borzi

L'étendue des liaisons de modèles Angular2 correspond à l'occurrence de composant. Seuls les éléments accessibles peuvent être utilisés dans les liaisons.

Vous pouvez le rendre disponible comme

class MyComponent {
  myConst = CONST;
}

{{myConst}}
18
Günter Zöchbauer

Il y a deux meilleures directions à mon avis:

Enveloppant des constantes en tant que propriété de composant interne

enum.ts 

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

composant.ts 

import { stateEnum  } from './enum'
export class EnumUserClass {
  readonly stateEnum : typeof stateEnum = stateEnum ;    
}

Exemple utilise enum, mais cela peut être n'importe quel type de constante définie. L'opérateur typeof vous offre tous les avantages des fonctions de saisie TypeScript. Vous pouvez utiliser ensuite cette variable directement dans les modèles:

composant.html 

<p>{{stateEnum.DOING}}<p>

Cette solution est moins efficace dans le contexte d'utilisation de la mémoire, car vous dupliquez des données (ou des références à des constantes) dans chaque composant que vous souhaitez utiliser. A côté de cela, la syntaxe
readonly constData: typeof constData = constData
à mon avis, introduit beaucoup de bruit de syntaxe et peut être déroutant pour les nouveaux arrivants

Habillage de la constante externe dans la fonction composant

La deuxième option consiste à envelopper votre variable externe/constante avec une fonction de composant et à l’utiliser sur un modèle:

enum.ts 

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

composant.ts 

import { stateEnum  } from './enum'
export class EnumUserClass {
  getEnumString(idx) {
    return stateEnum[stateEnum[idx]];
  }   
}

composant.html 

<p>{{getEnumString(1)}}</p>

La bonne chose est que les données ne sont pas dupliquées dans le contrôleur, mais que d'autres inconvénients majeurs se produisent. Selon l’équipe Angular, l’utilisation des fonctions dans les modèles n’est pas recommandée en raison du mécanisme de détection des modifications, qui est beaucoup moins efficace lorsque les fonctions renvoient des valeurs aux modèles: la détection des modifications n’a aucune idée que la valeur renvoyée par une fonction a changé, elle sera donc appelée souvent plus que nécessaire (et en supposant que vous retourniez const, ce n’est nécessaire qu’une seule fois, lors du remplissage de la vue Modèle. Cela risque de nuire un peu à votre application (si vous sont chanceux) ou cela peut totalement échouer si la fonction résout avec Observable par exemple, et que vous utilisez async pipe pour vous abonner aux résultats. Vous pouvez vous référer à mon court article à ce sujet ICI

11
Tomas

Vous pouvez créer un BaseComponent, c’est un emplacement où vous devez créer vos instances de constante, puis vous pouvez créer votre FooComponent étend BaseComponent et vous pouvez utiliser vos constantes.

2
sercanD