angular - 输入属性更改时 ngOnChanges 未触发

Question

在 Angular 2 中改变组件属性时，您能否以编程方式触发 Angular 变化检测？

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

}