`निम्नलिखित के रूप में बनाने के लिए` angular2`

Question

मेरे बच्चे घटक में ngOnChanges` काम:

'use strict'; 

import {Component, Input, OnInit, OnChanges, ChangeDetectionStrategy, ElementRef} from 'angular2/core'; 

@Component({ 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    selector: 'my-app', 
    template: '' 
}) 
export class MyApp implements OnInit { 

    @Input() options: any; 

    constructor(private el: ElementRef) { 
    } 

    ngOnInit() { 

    } 

    ngOnChanges(...args: any[]) { 
     console.log('changing', args); 
    } 

} 

और माता पिता के घटक के रूप में निम्नलिखित:

'use strict'; 

import {Component, Input} from 'angular2/core'; 
import {MyApp} from './MyApp'; 

@Component({ 
    selector: 'map-presentation', 
    template: `<my-app [options]="opts"></my-app> 
    <button (click)="updates($event)">UPDATES</button> 
    `, 
    directives: [MyApp] 
}) 
export class MainApp { 

    opts: any; 

    constructor() { 
     this.opts = { 
      width: 500, 
      height: 600 
     }; 
    } 

    updates() { 
     console.log('before changes'); 
     this.opts = { 
      name: 'nanfeng' 
     }; 
    } 

} 

हर बार जब मैं "अपडेट" बटन क्लिक किया , ngOnChanges विधि कभी नहीं बुलाया जाए, लेकिन क्यों?

मैं कोणीय संस्करण मैं उपयोग कर रहा हूँ कि "2.0.0-beta.8"

Answer 1

It's working
app.ts

import {Component} from 'angular2/core'; 
import {child} from 'src/child'; 
@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <child-cmp [options]="opts"></child-cmp> 
    <button (click)="updates($event)">UPDATES</button> 
    `, 
    directives: [child] 
}) 
export class App { 
    opts: any; 

    constructor() { 
     this.opts = { 
      width: 500, 
      height: 600 
     }; 
    } 

    updates() { 
     console.log('after changes'); 
     this.opts = { 
      name: 'micronyks' 
     }; 
    } 
}; 

child.ts

import {Input,Component,Output,EventEmitter} from 'angular2/core'; 
import {Component, Input, OnInit, OnChanges, ChangeDetectionStrategy, ElementRef} from 'angular2/core'; 
@Component({ 
    selector: 'child-cmp', 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    template: ` 

    ` 
}) 
export class child { 
    @Input() options: any; 

    ngOnChanges(...args: any[]) { 
     console.log('onChange fired'); 
     console.log('changing', args); 
    } 
} 

Answer 2

वैसे यह "इनपुट गुण" के साथ काम करता है, इसका मतलब है इस प्रारूप में पारित लोगों के साथ: @ इनपुट() myVariable: string;

मैंने यह सामान्य रूप से काम किया जब यह इनपुट मान एक स्ट्रिंग, संख्या या बूलियन है, लेकिन ऑब्जेक्ट्स के साथ मैं अब भी क्या नहीं कर रहा हूं।

तो, "AppComponent" टेम्पलेट (.html) में कुछ इस तरह जा सकते हैं:

<input type="text" [(ngModel)]="name"> // name is a string property of the AppComponent 
<app-test [myVal]="name"></app-test> 

और "परीक्षण घटक" इस तरह दिख सकता:

import {Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-test', 
    template: ` 
    <div> TEST COMPONENT {{myVal}}</div> 
    `, 
    styles: [] 
}) 
export class TestComponent { 
    constructor() { } 
    ngOnChanges(changeRecord: SimpleChanges) { 
    console.log('It works!'); 
    /* changeRecord will have a property for each INPUT named the same 
    as the input. These are added to changeRecord when the input 
    gets a value */ 
    if(typeof changeRecord.myVal !== 'undefined){ 
      console.log('myVal = ', changeRecord.myVal.currentValue); 
    } 

    } 
    @Input() myVal: string; 
} 

चीयर्स।