angularjs - not - KO.Computed equivalente en Angular/Breeze Initializer

migrate angularjs to angular 6

Question

Tratar de obtener una comprensión más profunda de cómo Angular trata la vinculación de datos y comprenderla mejor y una cosa es difícil de entender:

En Knockout utilizo un computador para realizar un seguimiento de los cambios en una propiedad. En Angular es mover esta lógica a la vista, lo que es un trivial para mí, pero si esa es la manera de hacerlo, lo entiendo.

Mi pregunta es cuando estoy inicializando una nueva entidad con Breeze / Angular. ¿Cómo creo propiedades similares a las que se notifican cuando se producen cambios en la propiedad de las entidades?

myEntity.fullName = ko.computed(function () {
return myEntity.firstName + '' '' + myEntity.LastName;
});

en Angular sería el equivalente

myEntity.fullName = function () {
return myEntity.firstName + '' '' + myEntity.LastName;
};

¿Y eso hace un seguimiento adecuado de la entidad?

Answer 1

Encontré la respuesta en el siguiente sitio web. Si no hace algo similar, lo que encontrará es que todas las funciones se ejecutan durante la fase de resumen y no se activan por el cambio de un observable o propiedad dependiente. La solución a continuación le permite activar la función solo cuando se cambia un valor que utiliza.

http://www.jomendez.com/2015/02/06/knockoutjs-computed-equivalent-angularjs/

Explica cómo duplicar la suscripción y la función calculada en knockoutjs

var myViewModel = {
personName: ko.observable(''Bob'')
};
myViewModel.personName.subscribe(function(oldValue) {
alert("The person''s previous name is " + oldValue);
}, null, "beforeChange");

Esto es lo que encontré como resultado de mi investigación (esto es el equivalente de AngularJs) Usando el método $ scope. $ Watch vea el ciclo de vida de AngularJs https://docs.angularjs.org/guide/scope

$scope.myViewModel = {
personName: ''Bob''
};
$scope.$watch(‘myViewModel.personName’, function(newValue, oldValue){
//we are able to have both the old and the new value
alert("The person''s previous name is " + oldValue);
});
//knockout computed
var isVendorLoading = ko.observable(),
isCustomerLoading = ko.observable(),
isProgramLoading = ko.observable(),
isWaiting = ko.observable();
var isDataLoading = ko.computed(function () {
return isVendorLoading() || isCustomerLoading() || isProgramLoading() || isPositionLoading() || isWaiting();
});

Este es el equivalente de AngularJs para KnockoutJs computado:

$scope.isDataLoading = false;
$scope.$watch(
function (scope) {
//those are the variables to watch
return { isVendorLoading: scope.isVendorLoading, isCustomerLoading: scope.isCustomerLoading, isProgramLoading: scope.isProgramLoading, isWaiting: scope.isWaiting };
},
function (obj, oldObj) {
$timeout(function () {
//$timeout used to safely include the asignation inside the angular digest processs
$scope.isDataLoading = obj.isVendorLoading || obj.isCustomerLoading || obj.isProgramLoading || obj.isPositionLoading || obj.isWaiting;
});
},
true
);

Answer 2

Usted es correcto simplemente hacer de ella una función. Si su entidad como se muestra se agrega al $scope , entonces accederá a la propiedad así:

<span class="fullname">{{ user.fullName() }}</span>

Siempre que Angular ejecute un ciclo de $digest , comprobará si hay cambios en la propiedad vinculada. En este caso, significa que llamará a la función fullName() y verificará si el resultado ha cambiado. Si es así, cualquier cambio que tenga un $watch adjunto a ese elemento, incluido el enlace simple, será notificado del cambio.

Una advertencia de esta técnica, sin embargo, es asegurarse de que las operaciones que se realizan dentro de su función sean relativamente rápidas y no tengan efectos secundarios. Funciones vinculadas como esta se llamarán muchas veces a lo largo de la aplicación.

Si necesita tener una función más compleja, sería mejor manejar eso dentro del controlador y actualizar una propiedad en el objeto manualmente cuando cambie.