Winkel 1,5 Komponente nicht $ onChanges bei Änderung aufrufen

Question

Ich habe Winkel 1.5 Komponente innerhalb HTML-Seite (nicht übergeordnete Komponente) und die Komponente wird nicht mehr als $ onChanges bei Änderung aufrufen: ist hier die mit HTML: . . .

<my-comp standards-data="standardsData"></my-comp> 

. . .

hier ist die Komponente:

angular.module("bla").component('myComp', { 
    templateUrl: '/my-comp.tpl.html', 
    controller: myController, 
    bindings: { 
     standardsData: '<' 
    } 
}); 

function myController() { 
    var self = this; 

    self.$onInit = function() { 
     self.standardsData = {}; 
    } 

    self.$onChanges = function (changes) { 
     self.standardsData.something = changes.standardsData.currentValue.something; 
    }; 
} 

Wenn ich neue Daten in der Abfrage des HTML holen, die meine Komponente enthält, es wird die Komponente nicht beeinflussen. Ich bekomme nur in die $ onInit der Komponente und nach $ scope.standardsData Änderungen (in der enthaltenen html/ctrl), die $ OnChanges meiner Komponente wird nicht aufrufen.

Ich hoffe, ich habe das Problem richtig beschrieben, Danke!

Answer 1

Die Bindung Ihrer Komponente an standardsData ist eine Bindung an eine Objektreferenz, die sich auch dann nicht ändert, wenn eine ihrer Eigenschaften geändert wird. Daher wird $onChanges nicht ausgelöst. Dies liegt an der Tatsache, dass $onChanges eine flache $watch verwendet.

Mit anderen Worten: $onChanges nur dann ausgelöst wird, wenn wir Primitive verwenden (dh nicht-Objekte) oder die Referenz des Javascript-Objekt ändern in die Komponente

So müssen Sie verpflichtet, entweder: 1) Binden Sie manuell an die gewünschte Eigenschaft/Eigenschaften und nicht an die Objektreferenz, oder 2) Ändern Sie das gesamte standardsData Objekt, wenn sich seine Daten ändern. Sie könnten auch 3) Neuschreiben $onChanges Funktionalität, nehme ich an (nicht empfohlen).

Option 1:

Verwenden nur auf die Eigenschaft Bind wenn die übergeordnete Steuereinheit/Komponente lediglich eine Eigenschaft oder Eigenschaften ändert.

<my-comp standards-data-something="standardsData.something"></my-comp> 

und

bindings: { 
    standardsDataSomething: '<' 
} 

Option 2: Ändern der Referenz

Verwenden, wenn die übergeordnete Steuereinheit/Komponente vollständig neue standardsData erhält. Sie würden Ihren aktuellen HTML-Code für diese Option beibehalten und festlegen:

standardsData = {newData}; //Reset the new data from http or wherever 

, um die Referenz zu ändern.

---

Einige weitere lesen Sie interessant finden:

http://blog.kwintenp.com/the-onchanges-lifecycle-hook/

http://www.codelord.net/2016/12/20/replacing-angulars-deep-watches-with-the-%24docheck-lifecycle-hook/