angular双向绑定的示例分析

魁首哥

作者

angular双向绑定的示例分析

这篇文章主要为大家展示了“angular双向绑定的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angular双向绑定的示例分析”这篇文章吧。

双向绑定原理

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

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

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

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

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

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

ngModel

与表单元素进行双向绑定

import{Component,OnInit}from'@angular/core';@Component({selector:'app-bind',template:`<div><div>Name:{{name}}</div><inputtype="text"nz-inputname="name"[(ngModel)]="name"autocomplete="off"></div>`})exportclassBindComponentimplementsOnInit{name='';constructor(){}ngOnInit():void{}}

效果图

自定义双向绑定属性

组件-html

<div><div>inner:{{value}}</div><inputnz-input(input)="onInput(input.value)"#inputautocomplete="off"></div>

组件-ts

import{Component,EventEmitter,Input,OnInit,Output}from'@angular/core';@Component({selector:'app-inner',templateUrl:'./inner.component.html',styleUrls:['./inner.component.scss']})exportclassInnerComponentimplementsOnInit{//设定输入属性@Input()value!:string;//设定输出事件@Output()valueChange:EventEmitter<string>=newEventEmitter();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>`})exportclassOuterComponentimplementsOnInit{name='';constructor(){}ngOnInit():void{}}