zoukankan      html  css  js  c++  java
  • Angular 组件的双向绑定

    组件双向绑定的本质就是属性绑定加事件绑定,在引发绑定事件的时候改变属性值。举个例子:

    // 子组件
    import { Component, Input, Output, EventEmitter } from '@angular/core';
    
    @Component({
      selector: 'app-sizer',
      template: `
        <p>子组件中的值:{{size}}</p>
        子组件中改为:<span (click)="change.emit($event.target.textContent)">
          <button>small</button>
          <button>large</button>
        </span>
      `,
    })
    export class SizerComponent {
      @Input() size: 'small' | 'large' = 'small';
      @Output() change = new EventEmitter();
    }
    
    import { Component } from "@angular/core";
    
    @Component({
      selector: 'my-app',
      template: `
        <p>父组件中的值:{{size}}</p>
        <app-sizer [size]="size" (change)="size = $event"></app-sizer>
      `,
    })
    export class AppComponent {
      size = 'large';
    }
    

    其中属性绑定 [size]="size" 将值传入组件,事件绑定 (change)="size = $event" 让组件发生变化时将变化的值输出赋值给 size ,这样一来便实现了双向绑定。

    Angular 的双向绑定语法是方括号和圆括号的组合 [()]。要使用该语法,@Output() 属性的名字必须遵循 inputChange 模式,其中 input 是相应 @Input() 属性的名字。我们把例子中的 change 改为 sizeChange 就可以使用双向绑定语法了,即 <app-sizer [(size)]="size"></app-sizer>

    Angular 的 FormsModule 提供了一个 ngModel 指令,使用 [(ngModel)]="变量" 形式可以进行双向绑定。这其实是一个语法糖,相当于[ngModel]="变量" (ngModelChange)="变量 = $event"

    文中使用的工具或者包的版本:
    Angular CLI 11.0.6

  • 相关阅读:
    使文字背景透明
    文件拷贝
    鼠标选取图象的实现
    刷新整个画布
    将区域的颜色取反
    用API处理位图
    用TImageList动态画透明图片
    将bmp文件转换为jpg文件
    解决phpmyadmin-1800秒超时链接失效问题
    Linux下解压命令大全
  • 原文地址:https://www.cnblogs.com/yshenhua/p/14599318.html
Copyright © 2011-2022 走看看