angular双向绑定详解_JavaScript

上一篇: angular父子组件通信详解下一篇:angular内容投影详解

angular双向绑定详解

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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 { }
}

效果图

总结

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

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的angular双向绑定详解全部内容，希望文章能够帮你解决angular双向绑定详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: angular父子组件通信详解下一篇:angular内容投影详解

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16