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 { }
}

效果图

总结

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