耀极客论坛

 找回密码
 立即注册
查看: 565|回复: 0

angular双向绑定详解

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 02:09:24 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了angular双向绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

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

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

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

  名称规则为 [输入名] + Change。
       
  • 属性绑定(@Input-输入) - 设置特定的元素属性。   
  • 事件绑定(@Output-输出) - 侦听元素更改事件。
  所以表单双向绑定中有 ngModel 和 ngModelChange,也可以自定义双向绑定属性。

ngModel
  与表单元素进行双向绑定
  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3.   selector: 'app-bind',
  4.   template: `
  5.     ‹div>
  6.       ‹div>Name: {{ name }}‹/div>
  7.       ‹input type="text" nz-input name="name" [(ngModel)]="name" autocomplete="off">
  8.     ‹/div>
  9.   `
  10. })
  11. export class BindComponent implements OnInit {
  12.   name = '';
  13.   constructor() { }
  14.   ngOnInit(): void { }
  15. }
复制代码

效果图


自定义双向绑定属性

组件-html
  1. ‹div>
  2.   ‹div>inner: {{ value }}‹/div>
  3.   ‹input nz-input (input)="onInput(input.value)" #input autocomplete="off">
  4. ‹/div>
复制代码
组件-ts
  1. import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
  2. @Component({
  3.   selector: 'app-inner',
  4.   templateUrl: './inner.component.html',
  5.   styleUrls: ['./inner.component.scss']
  6. })
  7. export class InnerComponent implements OnInit {
  8.   // 设定输入属性
  9.   @Input() value!: string;
  10.   // 设定输出事件
  11.   @Output() valueChange: EventEmitter‹string> = new EventEmitter();
  12.   constructor() { }
  13.   ngOnInit(): void { }
  14.   onInput(value: string){
  15.     // 触发输出事件-输出数据
  16.     this.valueChange.emit(value);
  17.   }
  18. }
复制代码
外部使用
  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3.   selector: 'app-outer',
  4.   template: `
  5.     ‹div>
  6.       ‹div>Name: {{ name }}‹/div>
  7.       ‹app-inner [(value)]="name">‹/app-inner>
  8.     ‹/div>
  9.   `
  10. })
  11. export class OuterComponent implements OnInit {
  12.   name = '';
  13.   constructor() { }
  14.   ngOnInit(): void { }
  15. }
复制代码
效果图


总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:31 , Processed in 0.072114 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表