Jak `ngOnChanges` pracę w` angular2`

Question

My składnikiem dziecięcej w następujący sposób:

'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); 
    } 

} 

i komponent Parent w następujący sposób:

'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' 
     }; 
    } 

} 

Za każdym razem, gdy kliknąłem przycisk "Aktualizacje" , metoda ngOnChanges nigdy nie zostanie wywołana, ale dlaczego?

wersja kątowa ja używam to "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

Cóż, działa z "właściwościami wejściowymi", to znaczy z tymi przekazanymi w tym formacie: @Input() myVariable: string;

Zrobiłem to normalnie, gdy ta wartość wejściowa jest łańcuchem, liczbą lub boolean, ale z obiektami nadal nie wiem, co się dzieje.

Tak, w "AppComponent" szablon (.html) może wyglądać następująco:

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

i "test" komponent może wyglądać następująco:

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; 
} 

Cheers.