[Day 28] banana in a box！关於双向系结功能的语法糖

Okay！最後几天要看的内容是关於 Angular 的双向系结。

如果你跟我一样是从 Angular tutorial 开始学习Angular 的话，那你应该会从 Data binding 这个章节内的其中一个说明连结，连到 Angular glossary 看到 two-way data binding with ngModel 的字样。

Two-way binding 的效果就如其名，除了从 TypeScript 的逻辑将资料提供给 HTML Template 显示之外，他也能够将 HTML 上因为的使用者互动而变更的值反应给 TypeScript。一般最常见到的 two-way binding 应该就是 ngModel，但其实除了 ngModel 之外，开发者也可以透过 Angular 提供的语法糖来达到相同的效果。

关於范例

<app-slider-wrapper [(sliderValue)]="slider"></app-slider-wrapper>
<div>
  <label>Slider value: </label><label>{{ slider }}</label>
</div>

↑ Block 1：AppComponent HTML template

@Component({
  selector: 'app-slider-wrapper',
  styleUrls: ['./slider-wrapper.component.scss'],
  template: `<mat-slider
    [value]="sliderValue"
    (change)="onChange($event)"
  ></mat-slider>`,
})
export class SliderWrapperComponent {
  @Input() sliderValue: number;
  @Output() sliderValueChange = new EventEmitter<number>();
  constructor() {}

  onChange(event: MatSliderChange): void {
    this.sliderValueChange.emit(event.value);
  }

↑ Block 2：SliderWrapperComponent

以上的范例会有下面图的效果：

当滑动 slider 时，外层 AppComponent 的 label 就会跟着有反应。

小小总结

要达成像范例一样的 two-way binding，需要完成的其实就是两件事：

1. 有一个 @Input property，以本例来说就是 sliderValue。
2. 有一个 @Output 的 EventEmitter，名称是想要做 two-way binding 的属性名称加上 Change 後缀，以本例来说是 sliderValueChange。

只要做到以上两件事，Angular 就会主动帮你把它变成支援 two-way binding 的属性罗！

以上就是今天要介绍给各位的 tip，明天会再接着探讨 Angular 是怎麽将 @Input property 与 @Output EventEmitter 关联在一起，让使用者的 property 也能够透过 banana in a box 达成 two-way binding。

相关连结

• https://angular.io/guide/two-way-binding

最後 3 天啦

以下按照入团顺序列出我们团队夥伴的系列文章！

请自由参阅 ?

• 打通 RxJS 任督二脉
• 深入 Azure 云端服务
• 如何用Laravel写一个简单的部落格网站
• 推动资安从0起步迈向70分，不用花大钱也能有声有色保平安。
• Azure Serverless 平步青云，漫步云端