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