Angular2 изменение дочернего имущества, не обновляющее обновление связанного свойства

У меня есть простая пользовательская директива с вводом, которую я привязываю в своем компоненте. Но по какой-либо причине метод ngOnchanges() не срабатывает при изменении дочернего свойства входного свойства.

my.component.ts

import {Component} from 'angular2/core';
import {MyDirective} from './my.directive';

@Component({
    directives: [MyDirective],
    selector: 'my-component', 
    templateUrl: 'Template.html'
})

export class MyComponent {
    test: { one: string; } = { one: "1" }

    constructor( ) {
        this.test.one = "2";
    }
    clicked() {
        console.log("clicked");
        var test2: { one: string; } = { one :"3" };
        this.test = test2; // THIS WORKS - because I'm changing the entire object
        this.test.one = "4"; //THIS DOES NOT WORK - ngOnChanges is NOT fired=
    }
}

my.directive.ts

import {Directive, Input} from 'angular2/core';
import {OnChanges} from 'angular2/core';

@Directive({
    selector: '[my-directive]',
    inputs: ['test']
})

export class MyDirective implements OnChanges {
    test: { one: string; } = { one: "" }

    constructor() { }

    ngOnChanges(value) {
        console.log(value);
    }
}

template.html

<div (click)="clicked()"> Click to change </div>
<div my-directive [(test)]="test">

Может ли кто-нибудь сказать мне, почему?

Ответы

Ответ 1

Фактически, это нормальное поведение и Angular2 не поддерживает глубокое сравнение. Он основан только на сравнительном сравнении. См. Эту проблему: https://github.com/angular/angular/issues/6458.

Это говорит о том, что они являются обходными решениями для уведомления директивы о том, что некоторые поля в объекте были обновлены.

  • Ссылка на директиву из компонента

    export class AppComponent {
  test: { one: string; } = { one: '1' }
  @ViewChild(MyDirective) viewChild:MyDirective;

  clicked() {
    this.test.one = '4';
    this.viewChild.testChanged(this.test);
  }
}

    В этом случае метод testChanged для директивы называется явно. См. Этот plunkr: https://plnkr.co/edit/TvibzkWUKNxH6uGkL6mJ?p=preview.

  • Использование события в службе

    Выделенная служба определяет событие testChanged

    export class ChangeService {
  testChanged: EventEmitter;

  constructor() {
    this.testChanged = new EventEmitter();
  }
}

    Компонент использует службу для запуска события testChanged:

    export class AppComponent {
  constructor(service:ChangeService) {
    this.service = service;
  }

  clicked() {
    this.test.one = '4';
    this.service.testChanged.emit(this.test);
  }
}

    Директива подписывается на это событие testChanged, чтобы получать уведомления

    export class MyDirective implements OnChanges,OnInit {
  @Input()
  test: { one: string; } = { one: "" }

  constructor(service:ChangeService) {
    service.testChanged.subscribe(data => {
      console.log('test object updated!');
    });
  }
}

Надеюсь, это поможет вам, Thierry