Angular2: ¿deberían ser accesibles las variables privadas en la plantilla?

Si se declara una variable privateen una clase de componente, ¿debería poder acceder a ella en la plantilla de ese componente?

@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
}

No, no deberías usar variables privadas en tus plantillas.

Si bien me gusta la respuesta de drewmoore y veo una lógica conceptual perfecta en ella, la implementación es incorrecta. Las plantillas no existen dentro de las clases de componentes, sino fuera de ellas. Echa un vistazo a este repositorio para la prueba.

La única razón por la que funciona es porque la privatepalabra clave de TypeScript realmente no hace que los miembros sean privados. La compilación Just-in-Time ocurre en un navegador en tiempo de ejecución y JS no tiene ningún concepto de miembros privados (¿todavía?). El crédito es para Sander Elias por ponerme en el camino correcto.

Con una ngccompilación anticipada, obtendrá errores si intenta acceder a miembros privados del componente desde la plantilla. Clone el repositorio de demostración, cambie MyComponentla visibilidad de los miembros a privada y obtendrá errores de compilación cuando se ejecute ngc. Aquí también hay una respuesta específica para la compilación anticipada.

Editar: esta respuesta ahora es incorrecta. No había una guía oficial sobre el tema cuando lo publiqué, pero como se explica en la respuesta (excelente y correcta) de @ Yaroslov, este ya no es el caso: Codelizer ahora advierte y la compilación de AoT fallará en las referencias a variables privadas en plantillas de componentes . Dicho esto, a nivel conceptual, todo aquí sigue siendo válido, por lo que dejaré esta respuesta, ya que parece haber sido útil.

Sí, esto se espera.

Tenga en cuenta que privatey otros modificadores de acceso son construcciones mecanografiadas, mientras que Componente / controlador / plantilla son construcciones angulares de las que no sabe nada. Los modificadores de acceso controlan la visibilidad entre clases: hacer un campo privateevita que otras clases tengan acceso a él, pero las plantillas y los controladores son cosas que existen dentro de las clases.

Eso no es técnicamente cierto, pero (en lugar de comprender cómo las clases se relacionan con los decoradores y sus metadatos), podría ser útil pensar de esta manera, porque lo importante (en mi humilde opinión) es dejar de pensar en la plantilla y el controlador como algo separado entidades para pensar en ellas como partes unificadas de la construcción Componente: este es uno de los principales aspectos del modelo mental ng2.

Pensando en ello de esa manera, obviamente esperamos que las privatevariables en una clase de componente sean visibles en su plantilla, por la misma razón que esperamos que sean visibles en los privatemétodos de esa clase.

Aunque el ejemplo de código indica que la pregunta es sobre TypeScript, no tiene el mecanografiadoetiqueta. Angular2 también está disponible para Dart y esta es una diferencia notable para Dart.

En Dart, la plantilla no puede hacer referencia a variables privadas de la clase de componente, porque Dart, en contraste con TypeScript, impide efectivamente el acceso de miembros privados desde el exterior.

Todavía respaldo la sugerencia de @drewmoores de pensar en el componente y su plantilla como una sola unidad.

Actualización (TS) Parece que con el acceso de compilación fuera de línea a las propiedades privadas será más limitado en Angular2 TS también https://github.com/angular/angular/issues/11422

Las variables privadas se pueden usar dentro de la plantilla del componente. Consulte la hoja de referencia angular2 para obtener una guía: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Puede encontrar una explicación más detallada sobre los miembros públicos / privados de las clases en mecanografiado aquí: https://www.typescriptlang.org/docs/handbook/classes.html .

Todos los miembros por defecto son públicos. Se puede acceder a los miembros públicos desde fuera de la clase de componente junto con la instancia de clase. Pero solo se puede acceder a los miembros privados dentro de las funciones de miembro de la clase.

Una solución alternativa podría ser usar variables privadas en el archivo ts y usar getters.

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

Este es un buen enfoque porque el archivo ts y el html siguen siendo independientes. Incluso si cambia el nombre de la variable _userName en el archivo ts, no tiene que hacer ningún cambio en el archivo de plantilla.

La respuesta corta es no, no debería poder acceder a miembros privados desde la plantilla porque está técnicamente separada del archivo TS.

En tsconfig.app.json, si proporciona la opción 'fullTemplateTypeCheck' en las opciones del compilador, puede ver todas las referencias no válidas en los archivos html de su proyecto en el momento de la construcción del proyecto.

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

}