【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能

app.component.html

<app-sizer [(ngModel)]="fontSizePx"></app-sizer>
<p [style.font-size.px]="fontSizePx">父组件字号：{{fontSizePx}}px</p>

app.component.ts

...

fontSizePx=12

...

sizer.component.html

<div>
  <button (click)="ngModelChange.emit(ngModel=ngModel+1)">增加+</button>
  <button (click)="ngModelChange.emit(ngModel=ngModel-1)">减小-</button>
  <button (click)="ngModelChange.emit(12)">重置</button>
  <p [style.font-size.px]="ngModel">子组件字号：{{ngModel}}px</p>
</div>

sizer.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-sizer',
  templateUrl: './sizer.component.html',
  styleUrls: ['./sizer.component.scss']
})
export class SizerComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { }
  
  @Input()  ngModel: any;
  @Output() ngModelChange = new EventEmitter;//注意一定要用“绑定名称+'Change'”的Output，否则不能被双向绑定支持。在子组件内部使用“xxxChange.emit(值)”来触发父组件ngModel绑定数据的变化（这是实现双向绑定的核心）。
 
}

实际渲染效果