处理 Angular 5 组件中的模型更改（双向绑定）

Question

我目前正在开发 angular 5 应用程序。我尝试在视图的输入中更改组件的成员变量，并在更改后在组件中使用该变量。

我的结构如下：

文件夹：我的测试

我的-test.component.html
我的-test.component.css
我的-test.component.ts

1) 我的-test.component.html:

<input [(ngModel)]="hello" />

2) 我的-test.component.ts:

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnChanges {
  hello: string = "bonjour";

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // I'd like to log the changes of my field 'hello', 
    // once it get's changed in the input on the ui...

       console.log(changes);
  }

}

很遗憾，此解决方案不起作用。您知道如何在 ui 上更改组件的变量，然后在组件中使用它吗？

谢谢！！

Answer 1

您可以使用 (ngModelChange)=functionToCall($event) 在模型更改时调用函数并获取更新值。它非常有用，您可以在同一元素上将它与常规 [(ngModel)] 一起使用。在这种情况下，您可以只使用 [ngModel] 而不是常规 [(ngModel)] 并将新值设置为 functionToCall 函数的变量，但这取决于您的需要。这是一个小演示（检查控制台以查看更新的值）：

https://stackblitz.com/edit/angular4-rnvmhm?file=app%2Fapp.component.html

Answer 2

您可以使用 (ngModelChange) 指令

    <input [(ngModel)]="hello" (ngModelChange)="myFunction()"/>

代码：

    import { Component } from '@angular/core';

    @Component({
        selector: 'my-test',
        templateUrl: './my-test.component.html',
        styleUrls: ['./my-test.component.css']
    })
    export class MyTestComponent {
        hello: string = "bonjour";

        constructor() { }

        myFunction() {
            console.log(this.hello);
        }
    }

Answer 3

使用方框语法 [(ngModel)] 中的香蕉来获取变量 (hello) 的双向数据绑定，如果您只想在组件内的其他方法中使用 hello 变量，则没有需要手动观察值的变化，因为 ngModel 会保持属性(hello) 和 view(input) 同步，所以方法使用 'hello' 属性将始终获得更新后的值。

但是如果你想在每次值变化时做一些事情，那么使用 ngModelChange 属性来监听属性的值变化。

<input type="text" [(ngModel)]="hello">
{{hello}}

监听属性

值的变化

<input type="text" [(ngModel)]="hello" (ngModelChange)="executeCallback($event)">
{{hello}} //will also get updated

<input type="text" [ngModel]="hello" (ngModelChange)="executeCallback($event)">
{{hello}} //will not get updated

处理 Angular 5 组件中的模型更改（双向绑定）

Handle Model Change in Angular 5 Component (Two-way-binding)

html

javascript

angular-components

angular

two-way-binding