Angular2 - les variables privées doivent-elles être accessibles dans le modèle?

Si une variable est déclarée privatesur une classe de composant, dois-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
}

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

Bien que j'aime la réponse de Drewmoore et que j'y vois une logique conceptuelle parfaite, la mise en œuvre est erronée. Les modèles n'existent pas dans les classes de composants, mais en dehors d'elles. Jetez un oeil à ce repo pour la preuve.

La seule raison pour laquelle cela fonctionne est que le privatemot - clé de TypeScript ne rend pas vraiment le membre privé. La compilation juste à temps se produit dans un navigateur au moment de l'exécution et JS n'a pas (encore?) De concept de membres privés. Le mérite revient à Sander Elias de m'avoir mis sur la bonne voie.

Avec ngcet la compilation Ahead-of-Time, vous obtiendrez des erreurs si vous essayez d'accéder aux membres privés du composant à partir du modèle. Clonez le dépôt de démonstration, changez MyComponentla visibilité des membres en privé et vous obtiendrez des erreurs de compilation lors de l'exécution ngc. Voici également la réponse spécifique pour la compilation Ahead-of-Time.

Edit: Cette réponse est maintenant incorrecte. Il n'y avait pas d'orientation officielle sur le sujet lorsque je l'ai posté, mais comme expliqué dans la réponse de @ Yaroslov (excellente et correcte), 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 le plan conceptuel, tout ici reste valable, je vais donc laisser cette réponse car elle semble avoir été utile.

Oui, c'est prévu.

Gardez à l'esprit que les privateautres modificateurs d'accès sont des constructions Typescript, alors que Component / controller / template sont des constructions angulaires dont Typescript ne sait rien. Les modificateurs d'accès contrôlent la visibilité entre les classes: créer un champ privateempêche les autres classes d'y avoir accès, mais les modèles et les contrôleurs sont des éléments 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 de penser à cela de cette façon, car l'important (IMHO) est de ne plus penser au modèle et au contrôleur comme séparés. les entités en les considérant comme des parties unifiées de la construction Component - c'est l'un des aspects majeurs du modèle mental ng2.

En y réfléchissant de cette façon, nous nous attendons évidemment à ce que les privatevariables d'une classe de composant soient visibles dans son modèle, pour la même raison nous nous attendons à ce qu'elles soient visibles dans les privateméthodes de cette classe.

Même si l'exemple de code indique que la question concerne TypeScript, il n'a pas le manuscritmarque. Angular2 est également disponible pour Dart et c'est une différence notable avec Dart.

Dans Dart, le modèle ne peut pas référencer les variables privées de la classe de composant, car Dart contrairement à TypeScript empêche effectivement l'accès des membres privés de l'extérieur.

Je soutiens toujours la suggestion de @drewmoores de penser au composant et à son modèle comme une seule unité.

Mise à jour (TS) Il semble qu'avec la compilation hors ligne, l'accès aux propriétés privées deviendra plus limité dans Angular2 TS également https://github.com/angular/angular/issues/11422

Les variables privées peuvent être utilisées dans le modèle du composant. Voir la feuille de triche angular2 pour le guide: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

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

Tous les membres par défaut sont publics. Les membres publics sont accessibles depuis l'extérieur de la classe de composant avec l'instance de classe. Mais les membres privés ne sont accessibles que dans les fonctions des membres de la classe.

Une solution de contournement pourrait être l'utilisation de variables privées dans le fichier ts et l'utilisation de getters.

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

C'est une bonne approche car le fichier ts et le html restent indépendants. Même si vous modifiez le nom de la variable _userName dans le fichier ts, vous ne devez apporter aucune modification au fichier modèle.

La réponse courte est non, vous ne devriez pas pouvoir accéder aux membres privés du modèle car il est techniquement séparé du fichier TS.

Dans tsconfig.app.json, si vous fournissez l'option 'fullTemplateTypeCheck' dans les options du compilateur, vous pouvez voir toutes les références non valides dans les fichiers html de votre projet au moment de la construction du projet.

"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true

}