Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

133
Vistas
Angular 2 métodos de plantillas vs getters

Me pregunto si hay algún beneficio para hacer esto:

 <div>{{getSomething()}}</div> export class MyComp { getSomething() { return ...} }

Más allá de esto:

 <div>{{getSomething}}</div> export class MyComp { get getSomething() { return ...} }

Use métodos vs getters para mostrar datos calculados.

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Miré más profundamente en esto y jugué con mecanografiado Playground. Declaré dos clases, una con getter y la segunda con el método get como se describe en sus preguntas.

Veamos cómo se ve:

En el primer ejemplo, declaramos un método para obtener el valor de la propiedad de la siguiente manera:

 class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } getGreeting() { return this.greeting; } }

Que después de la traducción a javascript se ve así:

 var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.getGreeting = function () { return this.greeting; }; return Greeter; }());

Y respecto al segundo ejemplo donde declaramos un getter de la siguiente manera:

 class GetterGreeter { _greeting: string; constructor(message: string) { this._greeting = message; } get greeting() { return this._greeting; } }

Que después de la traducción se ve así:

 var GetterGreeter = (function () { function GetterGreeter(message) { this._greeting = message; } Object.defineProperty(GetterGreeter.prototype, "greeting", { get: function () { return this._greeting; }, enumerable: true, configurable: true }); return GetterGreeter; }());

(Puedes jugar con la declaración y la traducción a javascript aquí )

Como puede ver con el método get (como en su primer ejemplo), el método se declara en el prototipo y en su segundo ejemplo, usando el mecanografiado del patrón getter, usa la API defineProperty.

En ambos casos, estamos invocando un método y angular también llamará a un método durante su detección de cambios para identificar cambios y volver a renderizar.

Tal como lo veo, esto es solo un azúcar sintáctico para el mismo enfoque y no veo ningún beneficio de rendimiento para uno de los métodos.

about 4 years ago · Santiago Trujillo Denunciar

0

Si eres un captador o un método, no importa desde un punto de vista técnico.

Algunos usan la convención de que un captador debe comportarse de manera similar a un campo y no realizar cálculos costosos, mientras que se debe usar un método si el cálculo es más que algunas cosas muy básicas como, por ejemplo, construir un nombre completo desde el primero, el segundo y el último. nombre.

Creo que esta es una buena práctica para seguir esa distinción para Angular, porque para el cálculo costoso de enlace de vista se debe evitar porque el método o getter se puede llamar con mucha frecuencia. En tal caso, es mejor almacenar el resultado en un campo y vincularlo al campo.

Muy importante en el enlace de vista es que el método o captador no devuelva valores diferentes en las llamadas posteriores cuando no se modificaron las dependencias (como return {}; , que se trataría como una nueva instancia de objeto y causaría un error como ExpressionChangedAfterItHasBeenCheckedError ).

about 4 years ago · Santiago Trujillo Denunciar

0

La diferencia es que en el primer caso usas una función en la expresión, pero en el segundo caso no es una función. Entonces no puedes usar

 <div>{{getSomething()}}</div> export class MyComp { get getSomething() { return ...} }

Los beneficios de usar el segundo método es usar la encapsulación de la propiedad dentro de la clase y necesita acceder a ella fuera de la clase.

Getters y setters son parte de la especificación ES5. Puedes leer sobre getter y setter .

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda