Escribir componentes sin observadores
Esta respuesta describe cinco técnicas que se pueden usar para escribir componentes de AngularJS 1.5 sin usar observadores.
Utilice la ng-changedirectiva
¿Qué métodos alternativos están disponibles para observar los cambios de estado de obj sin usar watch en preparación para AngularJs2?
Puede utilizar la ng-changedirectiva para reaccionar a los cambios de entrada.
<textarea ng-model='game.game'
ng-change="game.textChange(game.game)">
</textarea>
Y para propagar el evento a un componente principal, el controlador de eventos debe agregarse como un atributo del componente secundario.
<game game='myBox.game' game-change='myBox.gameChange($value)'></game>
JS
app.component("game", {
bindings: {game:'=',
gameChange: '&'},
controller: function() {
var game = this;
game.textChange = function (value) {
game.gameChange({$value: value});
});
},
controllerAs: 'game',
templateUrl: "/template2"
});
Y en el componente principal:
myBox.gameChange = function(newValue) {
console.log(newValue);
});
Este es el método preferido en el futuro. La estrategia de AngularJS de usar $watchno es escalable porque es una estrategia de sondeo. Cuando el número de $watchoyentes alcanza alrededor de 2000, la interfaz de usuario se vuelve lenta. La estrategia en Angular 2 es hacer que la colocación del marco más reactivo y evitar $watchen $scope.
Utilice el $onChangesgancho de ciclo de vida
Con la versión 1.5.3 , AngularJS agregó el enlace del $onChangesciclo de vida al $compileservicio.
De los Docs:
El controlador puede proporcionar los siguientes métodos que actúan como ganchos del ciclo de vida:
- $ onChanges (changesObj): se llama siempre que se actualizan los enlaces unidireccionales (
<) o interpolación ( @). El changesObjes un hash cuyas claves son los nombres de las propiedades enlazadas que han cambiado y los valores son un objeto del formulario { currentValue: ..., previousValue: ... }. Utilice este enlace para activar actualizaciones dentro de un componente, como la clonación del valor vinculado para evitar la mutación accidental del valor externo.
- Referencia de API de directiva integral de AngularJS - Ganchos de ciclo de vida
El $onChangesgancho se utiliza para reaccionar a cambios externos en el componente con <enlaces unidireccionales. La ng-changedirectiva se utiliza para propagar cambios desde el ng-modelcontrolador fuera del componente con &enlaces.
Utilice el $doCheckgancho de ciclo de vida
Con la versión 1.5.8 , AngularJS agregó el enlace$doCheck del ciclo de vida al $compileservicio.
De los Docs:
El controlador puede proporcionar los siguientes métodos que actúan como ganchos del ciclo de vida:
$doCheck()- Llamado en cada turno del ciclo de digestión. Brinda la oportunidad de detectar cambios y actuar sobre ellos. Cualquier acción que desee realizar en respuesta a los cambios que detecte debe invocarse desde este gancho; implementar esto no tiene ningún efecto sobre cuándo $onChangesse llama. Por ejemplo, este gancho podría ser útil si desea realizar una verificación de igualdad profunda, o para verificar un objeto Date, cuyos cambios no serían detectados por el detector de cambios de Angular y, por lo tanto, no se activarían $onChanges. Este gancho se invoca sin argumentos; si detecta cambios, debe almacenar los valores anteriores para compararlos con los valores actuales.
- Referencia de API de directiva integral de AngularJS - Ganchos de ciclo de vida
Comunicación entre componentes con require
Las directivas pueden requerir que los controladores de otras directivas permitan la comunicación entre ellos. Esto se puede lograr en un componente proporcionando un mapeo de objetos para la propiedad require . Las claves de objeto especifican los nombres de propiedad bajo los cuales los controladores requeridos (valores de objeto) estarán vinculados al controlador del componente requerido.
app.component('myPane', {
transclude: true,
require: {
tabsCtrl: '^myTabs'
},
bindings: {
title: '@'
},
controller: function() {
this.$onInit = function() {
this.tabsCtrl.addPane(this);
console.log(this);
};
},
templateUrl: 'my-pane.html'
});
Para obtener más información, consulte la Guía para desarrolladores de AngularJS: comunicación entre componentes
Enviar valores desde un servicio con RxJS
¿Qué pasa en una situación en la que tiene un Servicio que tiene un estado, por ejemplo? ¿Cómo podría impulsar cambios en ese Servicio y otros componentes aleatorios en la página estar al tanto de dicho cambio? Últimamente he estado luchando para abordar este problema
Cree un servicio con extensiones RxJS para Angular .
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>
var app = angular.module('myApp', ['rx']);
app.factory("DataService", function(rx) {
var subject = new rx.Subject();
var data = "Initial";
return {
set: function set(d){
data = d;
subject.onNext(d);
},
get: function get() {
return data;
},
subscribe: function (o) {
return subject.subscribe(o);
}
};
});
Entonces simplemente suscríbase a los cambios.
app.controller('displayCtrl', function(DataService) {
var $ctrl = this;
$ctrl.data = DataService.get();
var subscription = DataService.subscribe(function onNext(d) {
$ctrl.data = d;
});
this.$onDestroy = function() {
subscription.dispose();
};
});
Los clientes pueden suscribirse a los cambios con DataService.subscribey los productores pueden impulsar cambios con DataService.set.
La DEMO en PLNKR .