输入属性更改时,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

我遇到了同样的问题，这是我正在使用的一个简单但不是很优雅的解决方法。传入另一个属性来强制触发 ngOnChanges 方法

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

在父组件类中，每当您想手动触发子组件上的 ngOnChanges 方法时，只需修改“changeTrigger”属性

ParentComponent 类（poll-stat-chart 为子组件）

     @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 2

似乎没有办法修改输入绑定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。

我已经向 Angular 提交了一个问题，请求添加一个方法ComponentFixture，以便更容易编写这样的测试。