• 技术文章 >web前端 >js教程

    带你了解Angular10中的双向绑定

    青灯夜游青灯夜游2021-09-15 10:48:25转载95
    下面本篇文章带大家了解一下双向绑定,看看Angular中两种类型的双向绑定,希望对大家有所帮助!

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

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

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

    一、普通组件的双向绑定

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

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

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

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

    在这里插入图片描述

    但是,这并不是我们想要的结果,我们需要从父组件传入size,从而让sizer组件改变字体大小。并且,通过sizer组件的按钮点击事件,将改变后的size的值回传给父组件。

    接下来我们将使用前面的知识来改造代码(也就是双向绑定的原理介绍):

    // src/app/app.component.html
    // 下面的$event就是子组件传过来的值(必须是$event)
    <app-sizer [size]="appFontSize" (onSizeChange)="appFontSize = $event"></app-sizer>
    <div [style.font-size.px]="appFontSize">子组件修改后的FontSize: {{appFontSize}}</div>
    
    // src/app/app.component.ts
    ...
    export class AppComponent {
      appFontSize = 14;
    }
    // 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);
      }
    }

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

    在这里插入图片描述
    但是,这样是不是太麻烦了一点呢?下面,我们的双向绑定正式出场:

    Angular 的双向绑定语法是方括号和圆括号的组合 [()][] 进行属性绑定,() 进行事件绑定。修改下面代码:

    // src/app/app.component.html
    <app-sizer [(size)]="appFontSize"></app-sizer>
    <div [style.font-size.px]="appFontSize">子组件修改后的FontSize: {{appFontSize}}</div>
    // src/app/components/sizer/sizer.component.ts
    ...
    export class SizerComponent implements OnInit {
      @Input() size: number | string;
      // 修改事件名,********必须是:属性名 + Change 形式*********
      @Output() sizeChange = new EventEmitter<number>();
      ....
      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
      ],
      // ...
    })

    组件中使用:

    <!-- 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>

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

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

    修改代码:

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

    或者:

    <!-- 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中的双向绑定的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:angular 双向绑定
    上一篇:一招教你使用HTML/CSS和Three.js的喷火龙小游戏(代码分享) 下一篇:初级篇:如何用html、css和js制作酷黑模拟时钟(附代码)
    线上培训班

    相关文章推荐

    • 深入浅析Angular中的依赖注入• 快速了解Angular中的onPush变更检测策略• 聊聊Angular中常用的错误处理方式• 浅谈利用Angular指令怎么保持关注点分离?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网