typescript - ngform - Angular2: ¿deberían estar accesibles las variables privadas en la plantilla?

ngform angular 6

Question

Si una variable se declara private en 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
}

Answer 1

Aunque el ejemplo de código indica que la pregunta es sobre TypeScript, no tiene la etiqueta de typescript . 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 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

Answer 2

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

Answer 3

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.

Answer 4

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 palabra clave private 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 ngc y ngc anticipada, obtendrá errores si intenta acceder a miembros privados del componente desde la plantilla. Clone el repositorio de demostración, cambie la MyComponent miembros de MyComponent a privada y obtendrá errores de compilación cuando ejecute ngc . Aquí también hay una answer específica para la compilación anticipada.

Answer 5

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.

Answer 6

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 private modificadores de acceso private y de otro tipo son construcciones de Typecript, mientras que Componente / controlador / plantilla son construcciones angulares de las cuales no sabe nada. Los modificadores de acceso controlan la visibilidad entre clases: hacer que un campo sea private evita 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 se relacionan las clases 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 que las entidades piensen en ellas como partes unificadas de la construcción Componente: este es uno de los aspectos principales del modelo mental ng2.

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