angular双向绑定详解

目录
  • 双向绑定原理
  • ngModel
    • 效果图
  • 自定义双向绑定属性
    • 组件-html
    • 组件-ts
    • 外部使用
    • 效果图
  • 总结

双向绑定原理

双向绑定将属性绑定与事件绑定结合在一起。

Angular 的双向绑定语法是方括号和圆括号的组合 [()]。

[] 进行属性绑定，() 进行事件绑定。

名称规则为 [输入名] + Change。

  • 属性绑定(@Input-输入) - 设置特定的元素属性。
  • 事件绑定(@Output-输出) - 侦听元素更改事件。

所以表单双向绑定中有 ngModel 和 ngModelChange，也可以自定义双向绑定属性。

ngModel

与表单元素进行双向绑定

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-bind',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <input type="text" style="width: 300px;" nz-input name="name" [(ngModel)]="name" autocomplete="off">
    </div>
  `
})
export class BindComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

效果图

自定义双向绑定属性

组件-html

<div>
  <div>inner: {{ value }}</div>
  <input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>

组件-ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
  selector: 'app-inner',
  templateUrl: './inner.component.html',
  styleUrls: ['./inner.component.scss']
})
export class InnerComponent implements OnInit {
  // 设定输入属性
  @Input() value!: string;
  // 设定输出事件
  @Output() valueChange: EventEmitter<string> = new EventEmitter();
  constructor() { }
  ngOnInit(): void { }
  onInput(value: string){
    // 触发输出事件-输出数据
    this.valueChange.emit(value);
  }
}

外部使用

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-outer',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <app-inner [(value)]="name"></app-inner>
    </div>
  `
})
export class OuterComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

效果图

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:

  • 浅谈AngularJs 双向绑定原理(数据绑定机制)

    那么什么是双向绑定,下面简单进行讲解. 首先我们要理解数据绑定.我们看到的网站页面中,是由数据和设计两部分组合而成.将设计转换成浏览器能理解的语言,便是html和css主要做的工作.而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是js主要完成的工作.很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求).那么数据进行更新后,页面上相应的位置也能自动做出对应的修改,便是数据绑定. 在

  • 解决angular双向绑定无效果,ng-model不能正常显示的问题

    今天遇到了个问题,js代码中变量已经变化了,但是html页面中没有正常的显示出来. 代码如下: <input type="text" ng-model="paramValue" auto-focus> $scope.paramValue = param; 以上代码就会造成有时input框中无内容的情况,打断点显示$scope.paramValue是有值的,但是页面就是啥都显示不出来. 换成下边代码就没问题了: <input type="t

  • Angular自定义组件实现数据双向数据绑定的实例

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组件间的交互: 那么在[]和()的基础上,如何实现组件的双向数据绑定? 例子如下. 子组件: <!--testDataBinding.component.html--> <h1>childStatus: {{childStatus}}</h1> //testDataBindi

  • 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题

    angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是: Can't bind to 'ngModel' since it isn't a known property of 'input'. 解决办法: 在文件 app.component.ts 中引入ngModel 具体为: 添加两行代码: import { FormsModule } from '@angular/forms'; 和 FormsModule, 位置如下: 以上这篇解决angular2在双向数据绑定时[(

  • AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    引子 这篇文章是写给AngularJS新手的,如果你已经对AngularJS的双向数据绑定有了深入的了解,直接去阅读源代码好了. 背景 AngularJS开发者都想知道双向数据绑定是怎么实现的.与data-binding相关的术语琳琅满目: $watch,$apply,$digest,dirty-checking等等它们是如何工作的呢?让我们从头开始讲起吧 AngularJS 的双向数据绑定是被浏览器逼的 浏览器看上去很美,其实在数据交互这块儿,由于浏览器的"不作为",导致浏览器的数据

  • angular双向绑定详解

    angular双向绑定详解

    目录 双向绑定原理 ngModel 效果图 自定义双向绑定属性 组件-html 组件-ts 外部使用 效果图 总结 双向绑定原理 双向绑定将属性绑定与事件绑定结合在一起. Angular 的双向绑定语法是方括号和圆括号的组合 [()]. [] 进行属性绑定,() 进行事件绑定. 名称规则为 [输入名] + Change. 属性绑定(@Input-输入) - 设置特定的元素属性. 事件绑定(@Output-输出) - 侦听元素更改事件. 所以表单双向绑定中有 ngModel 和 ngModelCh

  • Angular JS数据的双向绑定详解及实例

    Angular JS数据的双向绑定 接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="Count

  • AngularJS入门教程之双向绑定详解

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

  • Vue双向绑定详解

    Vue双向绑定详解

    目录 1.双向绑定 2.那么其它标签选中会不会也有这个结果,答案当然是有: 3.我们再来看一个: 4.注意 总结 1.双向绑定 双向绑定就是 你们前端数据改变 你们data中的数据也会改变,同样的,你们data中的数据改变了 前端页面中的数据也同样会发生改变,而且,这个过程是不需要刷新的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

  • Angular17之Angular自定义指令详解

    Angular17之Angular自定义指令详解

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果. 2 指令的分类 组件.属性指令.结构性指令 3 指定义指令常用到的一些常量 3.1 Directive 用于装饰控制器类来指明该控制器类是一个自定义指令控制器类 3.2 ElementRef 作为DOM对象的引用

  • React事件处理和表单的绑定详解

    React事件处理和表单的绑定详解

    目录 一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理 二.表单 一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:

  • monaco editor在Angular的使用详解

    目录 正文 安装依赖 使用 正文 本篇文章主要记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用 安装依赖 在 angular12 及之前你可以选择 monaco-editor ngx-monaco-editor 这是没有问题的 但是如果你使用了更高版本的 angular 在使用 npm 安装 ngx-monaco-editor 时 会报错 因为原作者似乎已经停止了对这个库的维护 最终的支持停留在了 angular12 版本 当然 你选择可以选择正如提示那样

  • Angular排序实例详解

    说点小案例angular的排序 <!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } nav{ text-align: center; } nav

  • C/C++ Qt 数据库与TreeView组件绑定详解

    C/C++ Qt 数据库与TreeView组件绑定详解

    在上一篇博文<C/C++ Qt 数据库QSql增删改查组件应用>介绍了Qt中如何使用SQL操作函数,并实现了对数据库的增删改查等基本功能,从本篇开始将实现数据库与View组件的绑定,通过数据库与组件关联可实现动态展示数据库中的表记录. 我们先以TreeView组件为例,简单介绍一下如何实现组件与数据的绑定,首先我们需要创建一个表并插入几条测试记录,运行如下代码实现建库建表. #include <QSqlDatabase> #include <QSqlError> #in

随机推荐