ngOnChanges फायरिंग नहीं करते जब इनपुट प्रॉपर्टी बदल जाती है

Question

क्या आप angular2 में घटक गुण को म्यूट करते समय प्रोग्रामर रूप से कोणीय के परिवर्तन का पता लगा सकते हैं?

@Component({ 
    selector: 'my-component', 
}) 
class MyComponent implements OnChanges { 
    @Input() message: string; 

    ngOnChanges(changeRecord) { 
     for (var change in changeRecord) { 
     console.log('changed: ' + change); 
     } 
    } 

    doSomething() { 
    // I want ngOnChanges to be called some time after I set the 
    // message. Currently it is only called if the host element 
    // changes the value of [message] on the element. 
    this.message = 'some important stuff'; 
    } 
} 

Answer 1

वहाँ एक इनपुट this पर बाध्यकारी को संशोधित करने और यह परिवर्तन का पता लगाने के दौरान पता लगाने के लिए कोई रास्ता नहीं हो रहा है। लेकिन यह एक और घटक में पूरे घटक लपेटकर द्वारा इकाई परीक्षण मैं लिख रहा था ठीक करने के लिए

@ng.Component({ 
    selector: 'my-host-component', 
    template: '<my-component [message]="message" (change)="change.emit($event)"></my-component>' 
    directives: [MyComponent] 
}) 
class MyHostComponent { 
    message: string; 
    change = new EventEmitter<any>(); 
} 

मैं तो MyHostComponent पर परीक्षण भाग गया, बल्कि MyComponent से संभव हो गया था।

मैंने issue to angular सबमिट किया है कि यह अनुरोध ComponentFixture में जोड़ा गया है ताकि इस तरह के परीक्षण लिखना आसान हो।

Answer 2

मुझे एक ही समस्या थी, और यह एक साधारण लेकिन बहुत ही सुरुचिपूर्ण कामकाज है जिसका मैं उपयोग कर रहा हूं। एक और संपत्ति में दर्रा ट्रिगर ngOnChanges विधि के लिए मजबूर करने

<div poll-stat-chart [barData]="barData" [changeTrigger]="changeTrigger"></div> 

माता पिता घटक वर्ग में, जब भी आप मैन्युअल रूप से बच्चे के घटक पर ngOnChanges विधि सक्रिय करना चाहते हैं, बस संशोधित "changeTrigger" संपत्ति

ParentComponent क्लास (poll- स्टेट-चार्ट बच्चे घटक)

 @Component({ 
     directives: [PollStatChartCmp], 
     template: ` 
      <div poll-stat-chart [barData]="barData" [changeTrigger]="changeTrigger"> 
      </div> 
      <button (click)="triggerChild()"></button> 
     ` 
     } 
    export class ParentComponent { 
     changeTrigger = 1; 
     barData = [{key:1, value:'1'}, {key:2, value'2'}]; 
     triggerChild() { 
      this.barData[0].value = 'changedValue'; 

      //This will force fire ngOnChanges method of PollStatChartComponent 
      this.changeTrigger ++ ;   
     } 

    } 

और फिर बच्चे घटक कक्षा में, एक संपत्ति [changeTrigger]

जोड़ने है

@Component({ 
     selector: '[poll-stat-chart]', 
     inputs: ['barData', 'changeTrigger'], 
     template: ` 
      <h4>This should be a BAR CHAR</h4> 
     ` 
    }) 
    export class PollStatChartCmp { 
     barData; 
     changeTrigger; 
     constructor(private elementRef: ElementRef) { 
      this.render(); 

     } 

     ngOnChanges(changes) { 
      console.log('ngOnChanges fired'); 
      this.render(); 
     } 

     render() { console.log('render fired');} 

} 

Answer 3

क्यों एक समारोह बनाने नहीं वांछित उत्परिवर्तन संभालने के लिए और ngOnChanges और doSomething दोनों में इसे कहते हैं जिस तरह से overkilling मैन्युअल परिवर्तन का पता लगाने पर कॉल करना चाहते हैं या इस के लिए एक समाधान पर बहुत समय खर्च किया जाता है,? कुछ की तरह:

@Component({ 
    selector: 'my-component', 
}) 
class MyComponent implements OnChanges { 
    @Input() message: string; 
    viewMessage: string; 

    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) { 
    for (let propName in changes) { 
     if (propName === 'message') { 
     this.updateView(this.message); 
     } 
    } 
    } 

    doSomething() { 
    this.viewMessage = 'some important stuff'; 
    } 

    updateView(message: string) { 
    this.viewMessage = message; 
    } 
} 

तो viewMessage विशेषता आप का उपयोग किया जाएगा और टेम्पलेट को नियंत्रित किया जाएगा।