ngOnChanges не срабатывает при изменении свойства ввода

Question

Можете ли вы программно инициировать обнаружение изменений углов при изменении свойства компонента в угловом2?

@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

Там, кажется, нет никакого способа, чтобы изменить вход связывания на 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.

Я отправил issue to angular с просьбой добавить метод к ComponentFixture, чтобы тесты, подобные этому, были легче писать.

Answer 2

У меня была такая же проблема, и это простой, но не очень элегантный обходной путь, который я использую. Перейдите в другое свойство, чтобы заставить методу запуска ngOnChanges

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

В классе родительского компонента, каждый раз, когда вы хотите вручную огонь метод ngOnChanges на ребенка компоненте, просто изменить свойство «changeTrigger»

ParentComponent Class (poll- стат-диаграмма является дочерним компонентом)

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

Попытка вручную вызвать обнаружение изменений или потратил много времени на обходном пути для этого является способом overkilling, почему бы не создать функцию для обработки нужной мутации и вызвать его в обоих ngOnChanges и doSomething? что-то вроде:

@Component({ 
    selector: 'my-component', 
}) 
class MyComponent implements OnChanges { 
    @Input() message: string; 
    viewMessage: string; 

    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) { 
    for (let propName in changes) { 
     if (propName === 'message') { 
     this.updateView(this.message); 
     } 
    } 
    } 

    doSomething() { 
    this.viewMessage = 'some important stuff'; 
    } 

    updateView(message: string) { 
    this.viewMessage = message; 
    } 
} 

Так viewMessage будет атрибут, который вы будете использовать и контролировать шаблон.