Angular10中双向绑定的示例分析

// src/app/components/sizer/sizer.component.html

  -
  +
  FontSize: {{size}}px

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  public size = 14;
  // ...
  dec() {
    this.size++;
  }
  inc() {
    this.size--;
  }
}

// src/app/app.component.html
// 下面的$event就是子组件传过来的值（必须是$event）

子组件修改后的FontSize： {{appFontSize}}

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  // 创建输入属性size，为number或字符串类型
  @Input() size: number | string;
  // 创建自定义事件onSizeChange，需要一个number类型的参数
  @Output() onSizeChange = new EventEmitter();
  ....
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(1);
  }
  resize(step: number) {
    // 设置字体大小为12～40之间的值
    this.size = Math.min(40, Math.max(12, +this.size + step));
    // 通过事件传值
    this.onSizeChange.emit(this.size);
  }
}

// src/app/app.component.html

子组件修改后的FontSize： {{appFontSize}}

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  @Input() size: number | string;
  // 修改事件名,********必须是：属性名 + Change 形式*********
  @Output() sizeChange = new EventEmitter();
  ....
  resize(step: number) {
    this.size = Math.min(40, Math.max(12, +this.size + step));
    this.sizeChange.emit(this.size);
  }
}

会发现，功能没有受影响。

二、表单中的双向绑定[(ngModel)]

根据之前基本的双向绑定知识，[(ngModel)]语法可拆解为：

1.名为ngModel的输入属性

2.名为ngModelChange的输出属性

单独使用表单元素

首先需要引入FormsModule这个内置模块：

// src/app/app.module.ts 
import {FormsModule} from '@angular/forms';
...
@NgModule({
  // ...
  imports: [
    // ...
    FormsModule
  ],
  // ...
})

组件中使用：

input value is {{iptVal}}

上面这行代码相当于：

这其实很简单的，类似vue里面的写法。

在标签中使用

将代码放入

  
  
form 中input value is {{iptVal2}}

但是，我们会发现浏览器会报错：

报错意思说，在form表单中使用ngModel的话，我们需要给input添加一个name属性或者设置[ngModelOptions]="{standalone: true}"

修改代码：

  
  
form 中input value is {{iptVal2}}

或者：

  
  
form 中input value is {{iptVal2}}

或者：

  
  
form 中input value is {{iptVal2}}

在表单元素 中使用双向绑定就是这么简单了，注意引入FormsModule模块就行。

感谢你能够认真阅读完这篇文章，希望小编分享的“Angular10中双向绑定的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!