Come osservare la modifica del collegamento del componente utilizzando il componente angolare

Question

Come è possibile ascoltare il cambio del legame angolare dei componenti ed eseguire azioni?

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

ora quando items cambiamenti che desidera eseguire un'altra azione da questo valore,
Come posso fare?

Answer 1

ora quando gli elementi cambiano Voglio eseguire un'altra azione utilizzando questo valore, Come posso farlo?

Ma voglio evitare di utilizzare il morire $ portata

Se non si desidera utilizzare$scope è possibile utilizzare una proprietà setter per rilevare eventuali modifiche per esempio :

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 

Si prega di notare che non si dovrebbe usare per logica complessa (motivi: https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html)

Answer 2

Ho scoperto un modo ma non sono sicuro che sia il più efficiente. Per prima cosa inserisci $ scope come dipendenza e impostalo su this._scope o simile nel tuo costruttore. Ho il seguente poi nella mia funzione $onInit:

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

E 'altamente ispirato alla risposta qui: Angularjs: 'controller as syntax' and $watch

Speranza che aiuta, è quello che ho intenzione di usare fino a quando mi è stato detto il contrario.

Answer 3

Attualmente non è possibile utilizzare osservatori angolari senza $ scope poiché il rilevamento delle modifiche è basato su $ scope. Anche se usi espressioni in HTML, sarebbe delegate watch functionality to $scope.

Anche se si crea un altro meccanismo da guardare, è necessario ricordarsi di eseguire manualmente l'operazione di estrazione e con $ scope viene eseguito automaticamente.

Answer 4

Ecco una versione ES5.1 di basarat's answer:

function MyController() { 
    var items = []; 

    Object.defineProperty(this, 'items', { 
    get: function() { 
     return items; 
    }, 

    set: function(newVal) { 
     items = newVal; 
     console.log('Items changed:', newVal); 
    } 
    }); 
} 

Utilizzando Object.defineProperty(). Supportato da tutti i principali browser e IE9 +.

Answer 5

È possibile aggiungere il metodo $onChanges al controller

$onChanges(changesObj) è chiamato ogni volta che attacchi a senso unico vengono aggiornati. Le modificheObj è un hash le cui chiavi sono i nomi delle proprietà associate che sono state modificate ei valori sono un oggetto del modulo.

L'esempio seguente gestisce l'evento di modifica canChange.

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

Richiede AngularJS> = 1.5.3 e funziona solo unidirezionale associazione dati (come nell'esempio di cui sopra).

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

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