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

时间:2018-03-22 18:42:44

标签: javascript html5 angular angular-components two-way-binding

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

我的结构如下:

文件夹:my-test

  • my-test.component.html
  • MY-test.component.css
  • MY-test.component.ts

1)my-test.component.html:

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

2)my-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上更改组件的变量,然后在组件中使用它吗?

谢谢!

3 个答案:

答案 0 :(得分:4)

您可以使用(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);
        }
    }

答案 1 :(得分:2)

您可以使用(ngModelChange)=functionToCall($event)在模型更改时调用该函数并获取更新值。它非常实用,您可以在同一元素上使用常规[(ngModel)]。在这种情况下,您只能使用[ngModel]代替常规[(ngModel)],并将新值设置为来自functionToCall函数的变量,但这取决于您的需求。这是一个小型演示(检查控制台以查看更新的值):

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

答案 2 :(得分:2)

使用框语法[(ngModel)]中的banana来获取变量(hello)的双向数据绑定,如果你只想在组件内部的某些其他方法中使用hello变量,那么&#39;无需手动观察值变化,因为 ngModel 将保持属性(hello)和视图(输入)同步,因此使用&#39; hello&#39;属性将始终获得更新的值。

但是如果您想在每次值更改时执行某些操作,请使用 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