- Published on
Angular 1.5 metodos del ciclo de vida
- Authors
- Name
- Marcelo Carmona
- @carmonamarcelo
En angular 1.5 los componentes tienen un ciclo de vida bien definido y por medio de los cycle hooks nos permiten enganchar funciones que ayudan a modificar su comportamiento, vamos a ver los roles que tienen cada uno de estos hooks y por que deberías usarlos, es muy importante entenderlos ya que estamos pensando en una aplicación basada en componentes. Los ejemplos los voy a estar escribiendo en ES6, así que si todavía no empezaste a usar Angularjs con ES6 te recomiendo un buen repo que pude servir como boilerplate https://github.com/angularclass/NG6-starter
$onInit
Es una propiedad predefinida por angular que se expone en el controlador del componente a la cual le podemos asignar una función
class ComponentController {
$onInit() {
this.var1 = 'var1'
this.var2 = 'var2'
}
}
Es utilizado para código de inicialización del controller. Esta función es llamada solo una vez, una vez que se establecieron todos los bindings del componente y antes que se establezcan en sus hijos. Angular 2 tiene el método ngOnInit el cual nos servirá para la transición de Angular 1.x.
require
Anteriormente con las directivas usábamos el "require" para heredar métodos de otras directivas y su sintaxis nos permitía usar un String o Array (puedes buscarlo en la documentación de la api https://docs.angularjs.org/api/ng/service/$compile). Con el uso de componentes vamos a poder utilizar "require" utilizand un string.
import template from './myComponent.template.html'
import controller from './myComponent.controller'
const myComponent = {
require: '^^anotherComponent',
template,
controller,
bindings: {
input: '<',
onAction: '&',
},
}
export default myComponent
Al hacer uso de require es posible acceder al controlador desde un componente hijo, por ejemplo:
<myList>
<myItem title="Item 1"> contents 1 </myItem>
<myItem title="Item 2"> contents 2 </myItem>
<myItem title="Item 3"> contents 3 </myItem>
</myList>
En este caso MyItem es un buen ejemplo de uso ya que
import template from './myList.template.html'
import controller from './myList.controller'
const myList = {
transclude: true,
template,
controller,
}
export default myList
import template from './myItem.template.html'
import controller from './myItem.controller'
const myItem = {
bindings: {
title: '<',
},
require: '^^myList',
transclude: true,
template,
controller,
}
export default myItem
class myItemController {
$onInit() {
// vamos a poder tener acceso al controller de myList
this.myList.foo()
}
}
export default myItemController
$postLink
Llamado después de que el elemento de este controlador y sus hijos hayan sido linkeados. De forma similar a la función post-link, este hook se puede usar para configurar handlers de eventos del DOM y hacer la manipulación del DOM.
class myComponente {
$postLink() {
...
}
}
export default myComponente;
$onChanges
Este hook es el mas importante gracias a el nos permite usar una arquitectura one-way dataflow con angular 1.5.x. Lo que hay que tener en cuenta que este método va a ser ejecutado cada vez que modifica un input del componente. Osea el input esta definido en bindings: {...}
. Ya sea por '<'
(one-way databinding) o '@' (for evaluated DOM attribute values). Es ejecutado también al inicializar el componente y como parámetro recibe un objeto changes.
class myComponente {
$onChanges(changes) {
if (changes.name) {
this.user = changes.user.currentValue
}
}
}
export default myComponente
Ahora vamos a clonar la data que nos viene para que el valor que reciba el componente sea "inmutable" y lo que significa que no podemos modificar la variable desde el interior de este componente.
class myComponente {
$onChanges(changes) {
if (changes.name) {
this.user = angular.copy(changes.user.currentValue)
}
}
}
export default myComponente
$onDestroy
Básicamente es para hacer algo cuando el scope del componente es destruido, antes lo usábamos algo como
$scope.$on('$destroy', function () {
// destroy event
})
Ahora podemos escribirlo asi
class myComponente {
$onDestroy() {
// el scope del componente es destruido
}
}
export default myComponente