当前位置: 首页 > Web开发 > 开发 >正文

带你了解Angular10中的双向绑定

来源:互联网时间:2021-09-15 11:02:16编辑:网友分享
下面本篇文章带大家了解一下双向绑定,看看Angular10中两种类型的双向绑定,希望对大家有所帮助!
下面本篇文章带大家了解一下双向绑定,看看Angular中两种类型的双向绑定,希望对大家有所帮助!

带你了解Angular10中的双向绑定

前面我们了解了属性绑定、事件绑定以及输入和输出的使用,是时候了解双向绑定了。本节,我们将利用@Input()@Output()来了解下双向绑定。【相关教程推荐:《angular教程》】

定义:双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实,也就是对@Input()@Output()的一种简化)

双向绑定大致可以分成两种类型:

一、普通组件的双向绑定

这个类型的双向绑定可以发生在任何组件任何DOM元素上,下面我们通过一个实例来具体认识一下。

src/app/components/下面创建一个sizer组件作为子组件:

// src/app/components/sizer/sizer.component.html
<p>
  <button class="btn btn-danger" (click)="dec()"  <button class="btn btn-primary" (click)="inc()"  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</p>
// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  public size = 14;
  // ...
  dec() {
    this.size++;
  }
  inc() {
    this.size--;
  }
}

页面将是这样,且按钮功能实现:

带你了解Angular10中的双向绑定

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  // 创建输入属性size,为number或字符串类型
  @Input() size: number | string;
  // 创建自定义事件onSizeChange,需要一个number类型的参数
  @Output() onSizeChange = new EventEmitter<number>();
  ....
  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);
  }
}

同样实现了我们想要的效果:

带你了解Angular10中的双向绑定

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

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

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

1.名为ngModel的输入属性

2.名为ngModelChange的输出属性

单独使用表单元素

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

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

组件中使用:

<!-- src/app/app.component.html -->
<input type="text" [(ngModel)]="iptVal">
<p>input value is {{iptVal}}</p>

上面这行代码相当于:

<input [value]="iptVal" (input)="iptVal = $event.target.value" />

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

在标签中使用

将代码放入<form>标签内:

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

但是,我们会发现浏览器会报错:

带你了解Angular10中的双向绑定

或者:

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{standalone: true}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

或者:

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{name: 'appIput2'}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

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

总结:

1、双向绑定的原理其实就是@Input()@Output()结合使用,需要注意语法是[(属性名)]=“父组件中一个属性名”,先绑定输入,再绑定输出;

2、在form表单中使用双向绑定,应首先引入FormsModule这个内置模块,然后在input元素上添加name

更多编程相关知识,请访问:编程学习!!

以上就是带你了解Angular10中的双向绑定的详细内容,更多请关注web开发者其它相关文章!

上一篇: node文件怎么写成npm包并发布出

下一篇:教你使用HTML、CSS和JS创建响应

您可能感兴趣的文章

相关阅读