Làm thế nào để làm cho `tác ngOnChanges` trong` angular2`

Question

thành phần con của tôi như sau:

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

} 

và thành phần Chánh như sau đây:

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

} 

Mỗi lần khi tôi nhấp vào nút "CẬP NHẬT" , phương pháp ngOnChanges không bao giờ được gọi, nhưng tại sao?

tôi phiên bản góc cạnh tôi đang sử dụng là "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ũng hoạt động với "thuộc tính đầu vào", điều này có nghĩa là với các thuộc tính được truyền theo định dạng sau: @Input() myVariable: string;

Tôi làm cho nó hoạt động bình thường khi giá trị đầu vào này là một chuỗi, số hoặc boolean, nhưng với các đối tượng tôi vẫn không phải bây giờ những gì đang xảy ra.

Vì vậy, trong "AppComponent" template (.html) có thể đi một cái gì đó như thế này:

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

Và "thành phần kiểm tra" có thể trông như thế này:

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.