如何使``中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

那麼它適用於「輸入屬性」，這意味着與這些格式傳遞：@Input（）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; 
} 

乾杯。