Angular2子属性变化对绑定属性不触发更新 [英] Angular2 child property change not firing update on bound property

问题描述

我有一个简单的自定义指令有一个输入，说我在我的组件结合。但不管是什么原因，ngOnchanges（）方法不会改变输入属性的子属性时触发。

I have a simple custom directive with an input, that I'm binding to in my component. But for whatever reason, the ngOnchanges() method doesn't fire when changing a child property of the input property.

my.component.ts

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

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

template.html

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

谁能告诉我为什么吗？

Can anyone tell me why?

推荐答案

在事实上，这是一个正常的行为，Angular2不支持深度比较。它只是根据参考比较。看到这个问题： https://github.com/angular/angular/issues/6458

In fact, it's a normal behavior and Angular2 doesn't support deep comparison. It's only based on reference comparison. See this issue: https://github.com/angular/angular/issues/6458.

这表示，他们有一些变通方法，以通知对象中的某些领域进行了更新指令。

That said they are some workarounds to notify the directive that some fields in an object were updated.

• 从组件引用指令

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=$p $ PVIEW 。

In this case, the testChanged method of the directive is called explicitly. See this plunkr: https://plnkr.co/edit/TvibzkWUKNxH6uGkL6mJ?p=preview.

在服务中使用事件

有一个专门的服务定义 testChanged 事件

A dedicated service defines testChanged event

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

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于Angular2子属性变化对绑定属性不触发更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！