Angular2 - privés variables accessibles dans le modèle?

si une variable est déclarée private sur une classe de composants, devrais-je pouvoir y accéder dans le modèle de ce composant?

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{title}}</h2>
      <h2>Hello {{userName}}</h2> // I am getting this name
    </div>
  `,
})
export class App {
  public title = 'Angular 2';
  private userName = "Test Name"; //declared as private
}
94
demandé sur drewmoore 2016-01-03 10:03:18

5 réponses

modifier: cette réponse est maintenant incorrecte. il n'y avait aucune directive officielle sur le sujet lorsque je l'ai posté, mais comme expliqué dans la réponse de @Yaroslov (excellent, et correct), ce n'est plus le cas: Codelizer avertit maintenant et la compilation AoT échouera sur les références aux variables privées dans les modèles de composants. Cela dit, sur un plan conceptuel tout ici reste valable, donc je vais laisser cette réponse, car il semble avoir été utile.


Oui, c'est prévu.

gardez à l'esprit que private et les autres modificateurs d'accès sont des constructions typographiques, alors que les composants/Controllers/template sont des constructions angulaires dont le typographique ne sait rien. Modificateurs d'accès contrôle visibilité entre classes: la création d'un champ private empêche autres classes d'y avoir accès, mais les gabarits et les contrôleurs sont des choses qui existent dans les classes .

ce n'est pas techniquement vrai, mais (au lieu de comprendre comment les classes se rapportent aux décorateurs et à leurs métadonnées), il pourrait être utile d'y penser de cette façon, parce que la chose importante (IMHO) est de passer de la réflexion sur le modèle et le contrôleur en tant qu'entités séparées à la réflexion sur eux en tant que parties unifiées de la construction de composants - c'est l'un des aspects majeurs du modèle mental ng2.

En y pensant de cette façon, nous nous attendons évidemment à ce que les variables private sur une classe de composants soient visibles dans son modèle, pour la même raison que nous nous attendons à ce qu'elles soient visibles dans les méthodes private sur cette classe.

67
répondu drewmoore 2016-12-16 00:39:42

Non, vous ne devriez pas utiliser de variables privées dans vos modèles.

alors que j'aime la réponse de drewmoore et y voir une parfaite logique conceptuelle, implémentation wise it's wrong. Les gabarits n'existent pas dans les classes de composants, mais à l'extérieur de celles-ci. Jetez un oeil à ce rapport pour la preuve.

la seule raison pour laquelle cela fonctionne est parce que le mot-clé private de TypeScript ne fait pas vraiment membre privé. La compilation juste-à-temps se produit dans un navigateur à l'exécution et JS n'a pas de concept de membres privés (encore?). Le crédit va à Sander Elias pour m'avoir mis sur la bonne voie.

avec ngc et compilation anticipée, vous obtiendrez des erreurs si vous essayez d'accéder aux membres privés du composant à partir du modèle. Clone repo de démonstration, changer MyComponent la visibilité des membres en privé et vous obtiendrez compilation erreurs lors de l'exécution de ngc . Voici aussi réponse spécifique pour la compilation à L'avance.

144
répondu Yaroslav Admin 2017-05-23 12:03:05

même si l'exemple de code indique que la question porte sur le caractère typographique, il n'y a pas la balise . Angular2 est également disponible pour Dart et c'est une différence notable pour Dart.

Dans Dart le modèle ne peut pas référence à des variables privées de la classe de composant, parce que Dart contrairement à Tapuscrit empêche efficacement l'accès des membres privés de l'extérieur.

j'appuie toujours la suggestion de @drewmoores de penser au composant et à son modèle comme une unité.

mise à Jour (TS) Il semble avec la compilation offline l'accès aux propriétés privées deviendra plus limité en Angular2 TS ainsi https://github.com/angular/angular/issues/11422

13
répondu Günter Zöchbauer 2016-09-08 06:15:36

les variables privées peuvent être utilisées dans le modèle de component. Voir angular2 feuille tricher pour guide: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-enfant-setter

une explication plus détaillée sur les membres publics/privés des classes en caractères typographiques peut être trouvée ici: https://www.typescriptlang.org/docs/handbook/classes.html .

tous les membres par défaut sont Publiques. Les membres du Public sont accessibles depuis l'extérieur de la classe component avec l'instance de classe. Mais les membres privés ne sont accessibles que dans les fonctions de membre de classe.

2
répondu anusreemn 2017-03-23 07:54:33

une solution de rechange pourrait être d'utiliser des variables privées dans le fichier ts et d'utiliser des getters.

private _userName = "Test Name";
get userName() {
  return this._userName;
}

C'est une bonne approche car le fichier ts et le html reste indépendant. Même si vous changez le nom de la variable _userName dans le fichier ts, vous n'avez pas à faire de changement dans le fichier template.

1
répondu Franklin Pious 2018-03-27 05:43:44