javascript - crear - pasar parametros entre componentes angular 4

Cómo ver el cambio de enlace de componente usando el componente angular

Question

¿Cómo puedo escuchar el cambio de enlace de componente angular y realizar acciones?

angular.module(''myapp'')
.component(''myComponent'', {
templateUrl: ''some.html'',
controller: MyController,
controllerAs: ''myCtrl'',
bindings: {
items: ''<''
}
});

ahora cuando los items cambian, quiero realizar otra acción usando este valor,
¿Cómo puedo hacerlo?

Answer 1

ahora cuando los elementos cambian, quiero realizar otra acción usando este valor, ¿Cómo puedo hacerlo?

Pero quiero evitar el uso del $ death scope

Si no desea usar $scope , puede usar un setter de propiedades para detectar cualquier cambio, por ejemplo:

class MyController {
private _items: string[] = []
set items(value:string[]){
this._items = value;
console.log(''Items changed:'',value);
}
get items():string[]{
return this._items;
}
}
const ctrl = new MyController();
ctrl.items = [''hello'',''world'']; // will also log to the console

Tenga en cuenta que no debe usarlo para lógica compleja (razones: https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html ) 🌹

Answer 2

Actualmente no puede usar vigilantes angulares sin $ scope ya que la detección de cambios se basa en $ scope. Incluso si usa expresiones en HTML, delegaría la funcionalidad del reloj a $ scope .

Incluso si crea algún otro mecanismo para mirar, deberá recordar desengancharlo manualmente, y con $ scope se realiza automáticamente.

Answer 3

Aquí hay una versión ES5.1 de la respuesta de basarat :

function MyController() {
var items = [];
Object.defineProperty(this, ''items'', {
get: function() {
return items;
},
set: function(newVal) {
items = newVal;
console.log(''Items changed:'', newVal);
}
});
}

Usando Object.defineProperty() . Compatible con todos los principales navegadores e IE9 +.

Answer 4

Descubrí un camino pero no estoy seguro de que sea el más eficiente. Primero this._scope $ scope como dependencia y this._scope en this._scope o similar en su constructor. Tengo lo siguiente en mi función $onInit :

this._scope.$watch(() => {
return this.items;
},
(newVal, oldVal) => {
// Do what you have to here
});

Está muy inspirado por la respuesta aquí: Angularjs: ''controlador como sintaxis'' y $ watch

Espero que ayude, es lo que voy a usar hasta que me digan lo contrario.

Answer 5

Puede agregar el método $onChanges al controlador

$onChanges(changesObj) se $onChanges(changesObj) cuando se actualizan enlaces unidireccionales. El changesObj es un hash cuyas claves son los nombres de las propiedades enlazadas que han cambiado, y los valores son un objeto de la forma.

El siguiente ejemplo maneja canChange change event.

angular.module(''app.components'', [])
.component(''changeHandler'', {
controller: function ChangeHandlerController() {
this.$onChanges = function (changes) {
if (changes.canChange)
this.performActionWithValueOf(changes.canChange);
};
},
bindings: {
canChange: ''<''
},
templateUrl: ''change-handler.html''
});

Requiere AngularJS> = 1.5.3 y funciona solo con enlace de datos unidireccional (como en el ejemplo anterior).

Documentos: https://docs.angularjs.org/guide/component

Referencia: http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html