OnChanges a 1,5 componenti angolari non funziona

Question

Dato che abbiamo un'applicazione Angular 1.x piuttosto grande, non è possibile aggiornarla completamente a Angular 2 ma adoro la nuova architettura. La versione 1.5 porta straordinari component alla stessa vecchia app. Come tutte le cose interessanti, manca di documentazione ;-)

Quindi, ecco una domanda. Ho queste due righe nella definizione del controller:

this.$onInit = setType; 
this.$onChanges = setType; 

il primo sta funzionando, mentre il secondo no. Sto usando il binding '<'. Quindi, al primo caricamento, lo stato del componente viene impostato in base ai valori passati, mentre le modifiche non vengono riflesse. Ho la speranza che dovrebbe funzionare da [1] e [2].

[1] https://docs.angularjs.org/guide/component

[2] https://angular.io/docs/js/latest/api/core/OnChanges-interface.html

UPD Ok, ho imparato che non dovrebbe funzionare: https://github.com/angular/angular.js/issues/14030

Qualcuno sa buone soluzioni alternative?

UPD2 Funziona come di 1.5.3

Answer 1

Per quanto posso dire, sia il metodo $onChanges e $onInit dovrebbe funzionare con la versione 1.5.3 AngularJS.

Ho creato un plnkr that demonstrates both usages.

Dispone di due componenti, un componente esterno e uno interno, in cui un valore è vincolato dal componente esterno a quello interno utilizzando l'operatore vincolante univoco <. Un campo di input aggiorna il valore del componente esterno. Su ogni input da tastiera nel campo di input, viene attivato il metodo $onChanges (aprire la console per vedere).

angular.module("app", []) 
.component("outer", { 
    restrict: "E", 
    template: `<input ng-model=$ctrl.value> <br /> 
      <inner value="$ctrl.value"> 
      </inner>` 
}) 
.component("inner", { 
    restrict: "E", 
    template: `{{$ctrl.value}}`, 
    bindings: { 
     value: "<" 
    }, 
    controller: function(){ 
     function setType() { 
      console.log("called"); 
     } 
     this.$onInit = setType; 
     this.$onChanges = setType; 
    } 
}); 

Answer 2

A partire dal AngularJs 1.5.3, supponendo ctrl.someModel è tenuto a senso unico in un componente figlio, quanto segue non si innescherà $ onChanges.

function get() { 
    api.getData().then((data) => { 
    ctrl.someModel.data = data 
    } 
} 

Sembra che l'aggiornamento delle proprietà di un oggetto non venga riconosciuto come aggiornamento.

Questo è il modo in cui attualmente lo aggiro. Non credo che sia la soluzione migliore, ma innesca $ onChanges. Creo una copia profonda del mio modello iniziale, aggiungo i dati come una delle sue proprietà e quindi imposto il mio modello iniziale sul valore del nuovo oggetto. Essenzialmente, aggiorno l'intero oggetto, che viene prelevato dal gancio ciclo di vita:

function get() { 
    api.getData().then((data='42') => { 
    const updatedModel = angular.copy(ctrl.someModel) 
    updatedModel.data = data 
    ctrl.someModel = updatedModel 
    } 
} 

E nel componente figlio (assumendo il modello come stato rilegata come 'dati'):

this.$onInit = function(bindings) { 
    if (bindings.data && bindings.data.currentValue) { 
    console.log(bindings.data.currentValue) // '42' 
    } 
} 

Answer 3

Dealing con $onChanges è difficile. In realtà, ecco perché nella versione 1.5.8 hanno introdotto il $doCheck, simile a Angular 2 ngDoCheck.

In questo modo, è possibile ascoltare manualmente cambiamenti all'interno dell'oggetto che si sta ascoltando, che non si verifica con il gancio $onChanges (chiamato solo quando viene cambiato il riferimento dell'oggetto). È la stessa cosa, ma viene chiamato per per ogni ciclo di digestione che consente di verificare manualmente le modifiche (ma meglio di quelle dell'orologio).

Per ulteriori dettagli, vedere this blog post

Answer 4

In sostanza, $ onChanges angolare grilletto gancio del ciclo di vita quando angolare trovare la variazione di riferimento (non la proprietà in oggetto modificato), così al fine di richiamare i $ onChanges nel bambino , nel genitore, assegna il nuovo oggetto. per esempio,

angular.module("app", []) 
.component("outer", { 
    restrict: "E", 
    controller : function(){ 
     this.value = {}; 
     this.userButtonClick = function(someValue){ 
      this.value = angular.copy(someValue); 
     } 
    }, 
    template: `<input ng-click="$ctrl.userButtonClick({somevalue : "value"})" /> 
    <br /> 
      <inner value="$ctrl.value"> 
      </inner>` 
    })   
.component("inner", { 
     restrict: "E", 
     template: `{{$ctrl.value}}`, 
     bindings: { 
      value: "<" 
     }, 
     controller: function(){ 
      function setType() { 
       console.log("called"); 
      } 
      this.$onInit = setType; 
      this.$onChanges = function(changeObj){ 
       console.log("changed value",changeObj.value.currentValue); 
      } 
     } 
    }); 

Non utilizzare $ doCheck a meno che non si vuole veramente innescare un callback in ogni ciclo digerire, perché viene richiamato in ogni ciclo $ digerire non importa qualche cambiamento vincolante o meno.