带你了解Angular10中的双向绑定

下面本篇文章带大家了解一下双向绑定，看看<a href="https://www.ymkuzhan.com/tutorial/development
<div>
<button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
<button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
// src/app/components/sizer/sizer.component.ts
…
export class SizerComponent implements OnInit {
public size = 14;
// …
dec() {
this.size++;
}
inc() {
this.size–;
}
}

页面将是这样，且按钮功能实现：

但是，这并不是我们想要的结果，我们需要从父组件传入size，从而让sizer组件改变字体大小。并且，通过sizer组件的按钮点击事件，将改变后的size的值回传给父组件。

接下来我们将使用前面的知识来改造代码（也就是双向绑定的原理介绍）：

// src/app/app.component.html
// 下面的$event就是子组件传过来的值（必须是$event）
<app-sizer [size]="appFontSize" (onSizeChange)="appFontSize = $event"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/app.component.ts
...
export class AppComponent {
  appFontSize = 14;
}

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  // 创建输入属性size，为number或字符串类型
  @Input() size: number | string;
  // 创建自定义事件onSizeChange，需要一个number类型的参数
  @Output() onSizeChange = new EventEmitter<number>();
  ....
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(1);
  }
  resize(step: number) {
    // 设置字体大小为12～40之间的值
    this.size = Math.min(40, Math.max(12, +this.size + step));
    // 通过事件传值
    this.onSizeChange.emit(this.size);
  }
}

同样实现了我们想要的效果：

但是，这样是不是太麻烦了一点呢？下面，我们的双向绑定正式出场：

Angular 的双向绑定语法是方括号和圆括号的组合 [()]。[] 进行属性绑定，() 进行事件绑定。修改下面代码：

// src/app/app.component.html
<app-sizer [(size)]="appFontSize"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  @Input() size: number | string;
  // 修改事件名,********必须是：属性名 + Change 形式*********
  @Output() sizeChange = new EventEmitter<number>();
  ....
  resize(step: number) {
    this.size = Math.min(40, Math.max(12, +this.size + step));
    this.sizeChange.emit(this.size);
  }
}

会发现，功能没有受影响。

二、表单中的双向绑定[(ngModel)]

单独使用表单元素

首先需要引入FormsModule这个内置模块：

// src/app/app.module.ts 
import {FormsModule} from '@angular/forms';
...
@NgModule({
  // ...
  imports: [
    // ...
    FormsModule
  ],
  // ...
})

组件中使用：

<!-- src/app/app.component.html -->
<input type="text" [(ngModel)]="iptVal">
<p>input value is {{iptVal}}</p>

上面这行代码相当于：

<input [value]="iptVal" (input)="iptVal = $event.target.value" />

这其实很简单的，类似vue里面的写法。

在标签中使用

将代码放入<form>标签内：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

但是，我们会发现浏览器会报错：

报错意思说，在form表单中使用ngModel的话，我们需要给input添加一个name属性或者设置[ngModelOptions]="{standalone: true}"

修改代码：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" name="appIput2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

或者：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{standalone: true}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

或者：

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{name: 'appIput2'}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

在表单元素 中使用双向绑定就是这么简单了，注意引入FormsModule模块就行。

总结：

1、双向绑定的原理其实就是@Input()跟@Output()结合使用，需要注意语法是[(属性名)]=“父组件中一个属性名”，先绑定输入，再绑定输出；

2、在form表单中使用双向绑定，应首先引入FormsModule这个内置模块，然后在input元素上添加name。

更多编程相关知识，请访问：编程学习！！

以上就是带你了解Angular10中的双向绑定的详细内容，更多请关注亿码酷站其它相关文章！

<!––>带你了解Angular10中的双向绑定
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

27410288普通用户

收藏 海报 链接