angular双向绑定的示例分析

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

双向绑定原理

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

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

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

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

• 属性绑定(@Input-输入) - 设置特定的元素属性。

• 事件绑定(@Output-输出) - 侦听元素更改事件。

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

ngModel

与表单元素进行双向绑定

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-bind',  template: `    
      
Name: {{ name }}
          
  `})export class BindComponent implements OnInit {  name = '';  constructor() { }  ngOnInit(): void { }}

效果图

自定义双向绑定属性

组件-html

  
inner: {{ value }}
  

组件-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 = new EventEmitter();  constructor() { }  ngOnInit(): void { }  onInput(value: string){    // 触发输出事件-输出数据    this.valueChange.emit(value);  }}

外部使用

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

效果图

以上是"angular双向绑定的示例分析"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！