कोणीय 2 बाल संपत्ति बाध्य संपत्ति पर फायरिंग अपडेट नहीं बदलती

Question

मेरे पास इनपुट के साथ एक सरल कस्टम निर्देश है, कि मैं अपने घटक में बाध्यकारी हूं। लेकिन किसी भी कारण से, इनपुट संपत्ति की बाल संपत्ति को बदलते समय ngOnchanges() विधि आग नहीं होती है।

my.component.ts

import {Component} from 'angular2/core'; 
import {MyDirective} from './my.directive'; 

@Component({ 
    directives: [MyDirective], 
    selector: 'my-component', 
    templateUrl: 'Template.html' 
}) 

export class MyComponent { 
    test: { one: string; } = { one: "1" } 

    constructor() { 
     this.test.one = "2"; 
    } 
    clicked() { 
     console.log("clicked"); 
     var test2: { one: string; } = { one :"3" }; 
     this.test = test2; // THIS WORKS - because I'm changing the entire object 
     this.test.one = "4"; //THIS DOES NOT WORK - ngOnChanges is NOT fired= 
    } 
} 

my.directive.ts

import {Directive, Input} from 'angular2/core'; 
import {OnChanges} from 'angular2/core'; 

@Directive({ 
    selector: '[my-directive]', 
    inputs: ['test'] 
}) 

export class MyDirective implements OnChanges { 
    test: { one: string; } = { one: "" } 

    constructor() { } 

    ngOnChanges(value) { 
     console.log(value); 
    } 
} 

template.html

<div (click)="clicked()"> Click to change </div> 
<div my-directive [(test)]="test"> 

किसी को भी मुझे बता सकते हैं क्यों?

Answer 1

वास्तव में, यह एक सामान्य व्यवहार है और Angular2 गहरी तुलना का समर्थन नहीं करता है। यह केवल संदर्भ तुलना पर आधारित है। यह समस्या देखें: https://github.com/angular/angular/issues/6458।

ने कहा कि वे निर्देशों को सूचित करने के लिए कुछ कामकाज हैं कि किसी ऑब्जेक्ट में कुछ फ़ील्ड अपडेट किए गए थे।

• घटक

  export class AppComponent { 
      test: { one: string; } = { one: '1' } 
      @ViewChild(MyDirective) viewChild:MyDirective; 
  
      clicked() { 
      this.test.one = '4'; 
      this.viewChild.testChanged(this.test); 
      } 
  } 
  

  इस मामले में से निर्देश संदर्भित, निर्देश का testChanged विधि स्पष्ट रूप से कहा जाता है। इस plunkr देखें: https://plnkr.co/edit/TvibzkWUKNxH6uGkL6mJ?p=preview।

• एक सेवा के भीतर एक घटना का उपयोग करना

  एक समर्पित सेवा को परिभाषित करता है testChanged घटना

  export class ChangeService { 
      testChanged: EventEmitter; 
  
      constructor() { 
      this.testChanged = new EventEmitter(); 
      } 
  } 
  

  घटक एक सेवा का उपयोग करता testChanged ईवेंट ट्रिगर करने के:

  export class AppComponent { 
      constructor(service:ChangeService) { 
      this.service = service; 
      } 
  
      clicked() { 
      this.test.one = '4'; 
      this.service.testChanged.emit(this.test); 
      } 
  } 
  

  निर्देश इस testChanged घटना में सदस्यता लेता है आदेश

  export class MyDirective implements OnChanges,OnInit { 
      @Input() 
      test: { one: string; } = { one: "" } 
  
      constructor(service:ChangeService) { 
      service.testChanged.subscribe(data => { 
       console.log('test object updated!'); 
      }); 
      } 
  } 
  

आशा है कि यह आप में मदद करता है अधिसूचित किया जाना, थियरी