1

me acabo de encontrar que he creado un proyecto nuevo de angular 7 y me he creado un método en el app.component.ts con el siguiente código.

app.component.ts

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-test';

  constructor() {}

  prueba(){
    console.log('Hello World!');
  }

}

Luego en el app.component.html llamo al método, adjunto código.

app.component.html

{{prueba()}}

Y este es el resultado, me lo saca más de 1 vez y no entiendo el motivo. introducir la descripción de la imagen aquí

Zip del proyecto: https://www92.zippyshare.com/v/MHAEjb1p/file.html

2
  • Puedes mostrar el html del app.component para ver como realizas la llamada al metodo
    – lDanny7
    Commented el 4 ene. 2019 a las 12:03
  • Lo he puesto arriba pero te lo pongo otra vez, en el app.component.html solo hay esto --> {{prueba()}} Commented el 4 ene. 2019 a las 12:04

3 respuestas 3

4

Esto sucede porque llamas a la función prueba() en una expresión como esta:

{{ prueba() }}

Esta función se llamará al menos dos veces si usa expresiones como esa.

La razón es porque Angular ejecuta ciclo de resumen hasta que todo esté actualizado (por lo tanto, será al menos dos veces). En su caso, se ejecutará la primera vez para devolver el valor y la segunda vez para verificar si quedan cambios.

Llamar a una funcion de esa manera no es una buena practica.

3
  • Muchas gracias ya me he dado cuenta voy a llamar a la función desde otro lado para que no suceda esto ya me ha quedado claro cómo funciona exactamente Angular ahora entiendo por que lo ejecuta más de 1 vez, gracias a todos. Commented el 4 ene. 2019 a las 14:20
  • Comentar que la segunda vez es porque estás en modo desarrollo, si ejecutas en modo producción se ejecutará sólo una pasada. Commented el 4 ene. 2019 a las 14:32
  • No es cierto, en producción se me ejecuta al menos 2 veces
    – elvenbyte
    Commented el 11 sept. 2020 a las 8:38
1

El mótivo de que se ejecute varías veces el console.log es por los cambios en la detención de angular. Aquí lo explica más en profundidad.

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

La manera que estas intentando ejecutar esa función no es la adecuada.

Si quieres que se te ejecute nada más iniciar la web deber utilizar el método ngOnInit()

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 title = 'angular-test';

constructor() {}

 ngOnInit() {
  this.prueba();
 }

 prueba(){
  console.log('Hello World!');
 }
}

Un saludo

4
  • Yo lo que quiero hacer es ejecutarlo dentro de un bucle en el html, pero me lo ejecuta mas de las veces que tiene el bucle, por ejemplo si el bucle tiene 3 vueltas por el metodos se ejecuta 6 o mas veces. Commented el 4 ene. 2019 a las 12:26
  • 1
    La respuesta a la ejecución múltiple de la función es por la detención de angular, en el código que has aportado no hay ningún bucle. Reestructura tu pregunta aportando más información, por favor. Commented el 4 ene. 2019 a las 12:35
  • Acabo de añadir un Link para descargar el proyecto de angular para que podais ver como se muestra el método mas de 1 vez, es que es complicado de explicar y no se como explicarlo de otra manera que no sea como lo he explicado, un saludo y gracias. Commented el 4 ene. 2019 a las 12:39
  • El .zip que has subido no me aclara nada. Tienes que partir de la base que la manera en la que estas bindeando esa función no es la adecuada. Si quieres hacer un bucle de console.log(), un elemento propio de javascript/typescript, debes hacerlo desde el propio ts. Y ejecutar esa función desde un ngOnInit() o de otra forma. Commented el 4 ene. 2019 a las 12:54
0

quisiera saber que pasa en el caso de que se ejecuta desde el ngOninit pero se sigue ejecutando muchas veces tengo la respuesta de un servicio no llamo mi metodo {{function()}} sino desde el NgOnInit pero sigue cargando cientos de veces, en local solo llama 1 vez pero en un servidor muchisimas veces

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.