Typescript 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.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">

单击以更改

---

有人能告诉我为什么吗？

事实上，这是一种正常的行为，Angular2不支持深入的比较。这只是基于参考比较。请参阅此问题：

也就是说，它们是一些变通方法，用于通知指令对象中的某些字段已更新

• 引用来自组件的指令

  export class AppComponent {
    test: { one: string; } = { one: '1' }
    @ViewChild(MyDirective) viewChild:MyDirective;
  
    clicked() {
      this.test.one = '4';
      this.viewChild.testChanged(this.test);
    }
  }
  

  在本例中，显式调用指令的testChanged方法。请参阅以下链接：

• 在服务中使用事件
  专用服务定义

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

希望它能帮助你，

---

蒂埃里

这两个似乎都不适合我。我尝试显式地将testChange发射器设置为@Ouput（），并尝试使用值指定类型，但它只是没有在指令中触发ngOnchanges。您使用哪个版本的Angular2，因为我使它与beta0版本一起工作？我也使用beta.0。您的testChange声明对我来说也是无效的（必须分配或放弃类型声明并直接转到：testChange=new EventEmitter（）；）我是否应该在指令中以某种特殊方式订阅以注册EventEmitter？否，事件由Angular本身检测，并触发

onChanges

方法…我明白了。。。那太令人失望了。老实说，我认为应该可以决定是否需要进行深入的比较。如果几乎所有其他js框架都支持它，那么性能就不会那么差。