angular双向绑定详解

双向绑定原理

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

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

效果图

总结

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