如何在每次模型角度2变化时调用函数？

Question

我有一个自定义选择组件，它在您点击li项目时设置模型，但由于我每次更改模型时都手动调用this.modelChange.next(this.model)，所以我很想避免这种混乱和可重复的操作。

所以我的问题是，如果有类似$scope.$watch的东西，我可以观察一个值是否发生变化，然后每次发生时调用this.modelChange.next(this.model)。

我一直在阅读关于Observables，但我无法弄清楚这应该如何用于一个简单的值，因为我看到的所有示例都与外部api：s的异步请求。

当然，必须有一个更简单的方法来实现这一目标？

（不是说我不能使用ngModelChanges，因为我实际上没有使用输入）。

import {Component, Input, Output, EventEmitter, OnInit, OnChanges} from 'angular2/core'; 

@Component({ 
    selector: 'form-select', 
    templateUrl: './app/assets/scripts/modules/form-controls/form-select/form-select.component.html', 
    styleUrls: ['./app/assets/scripts/modules/form-controls/form-select/form-select.component.css'], 
    inputs: [ 
    'options', 
    'callback', 
    'model', 
    'label' 
    ] 
}) 

export class FormSelectComponent implements OnInit, OnChanges { 
    @Input() model: any; 
    @Output() modelChange: EventEmitter = new EventEmitter(); 

    public isOpen: boolean = false; 

    ngOnInit() { 

    if (!this.model) { 
     this.model = {}; 
    } 

    for (var option of this.options) { 

     if (option.model == (this.model.model || this.model)) { 
     this.model = option; 

     } 
    } 
    } 

    ngOnChanges(changes: {[model: any]: SimpleChange}) { 
    console.log(changes); 
    this.modelChange.next(changes['model'].currentValue); 
    } 

    toggle() { 
    this.isOpen = !this.isOpen; 
    } 

    close() { 
    this.isOpen = false; 
    } 

    select(option, callback) { 
    this.model = option; 
    this.close(); 

    callback ? callback() : false; 
    } 

    isSelected(option) { 
    return option.model === this.model.model; 
    } 
} 

编辑：我尝试使用ngOnChanges（见上更新的代码），但它只能在初始化运行一次，然后在没有检测的变化。有什么不对？

Answer 1

所以我的问题是，如果有类似$范围的东西$看我在哪里可以看，如果输入属性model的值更改。

如果model是一个JavaScript基本类型（数字，字符串，布尔值），那么你就可以实现ngOnChanges()要通知符变化。请参阅cookbook example和lifecycle doc, OnChanges section。
另一种选择是使用setter和getter。见cookbook example。

如果model是一个JavaScript引用类型（数组，对象，日期等），那么你是怎样判断的变化取决于如何模型的变化：

• 如果参考模型的变化（即，您指定一个新的数组，或一个新的对象等），您可以实现ngOnChanges()以通知更改，就像原始类型一样。然而，如果模型引用没有改变，但模型的某些属性发生了变化（例如，数组项的值发生了变化，或者数组项被添加或删除，或者对象属性值发生变化），但是，如果模型引用不发生变化，您可以执行ngDoCheck()来实现您自己的更改检测逻辑。
  见lifecycle doc, DoCheck section。

Answer 2

您可以做一个model的getter/setter方法或通过添加ngOnChanges(changes) {}方法被称为每一个@Input()值更改后的时间实现OnChanges。

从文档的ngOnChanges()例如（上面链接）：

@Component({ 
    selector: 'my-cmp', 
    template: `<p>myProp = {{myProp}}</p>` 
}) 
class MyComponent implements OnChanges { 
    @Input() myProp: any; 
    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
    console.log('ngOnChanges - myProp = ' + changes['myProp'].currentValue); 
    } 
} 
@Component({ 
    selector: 'app', 
    template: ` 
    <button (click)="value = value + 1">Change MyComponent</button> 
    <my-cmp [my-prop]="value"></my-cmp>`, 
    directives: [MyComponent] 
}) 
export class App { 
    value = 0; 
} 
bootstrap(App).catch(err => console.error(err)); 

更新

如果的model变化的内部状态，但不是model本身（不同model实例）然后改变检测不承认它。您需要实现自己的机制来通知感兴趣的代码，例如在model中使用Observable，它发出组件可以订阅的更改事件。

此外，当model通过数据绑定（当someFieldInParent在<my-comp [model]="someFieldInParent">已经改变和角传入MyComponent新值model。

return option.model === this.model.model;改变ngOnChanges()仅称为不引起ngOnChanges()被调用。对于这工作的getter/setter方法是一种更适合

Answer 3

如果选择自定义组件在内部使用的表单输入（S），我会充分利用它/他们ngModelChange事件：

<select [ngModel]="..." (ngModelUpdate)="triggerUpdate($event)">…</select> 

或valueChanges可观察到的相应控件（如果有的话）。在模板：

<select [ngFormControl]="myForm.controls.selectCtrl">…</select> 

在组件：

myForm.controls.selectCtrl.valueChanges.subscribe(newValue => { 
    (...) 
}); 

Answer 4

ngAfterViewChecked是一个更好的生命周期方法，因为它在DOM被渲染并且可以在这里完成任何操作之后被调用。

https://stackoverflow.com/a/35493028/6522875