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綁定數據的變化（這是實現雙向綁定的核心）。}

實際渲染效果

---

?擴展閱讀?【說人話】真正意義上講清楚了如何在vue的自定義組件中使用v-model=“”雙向綁定_你摯愛的強哥?給你發來1條消息?-CSDN博客組件代碼：<template> <div class="sg-component"> </div></template><script> export default { props: ["modelValue"],//單項綁定(這個modalValue叫什么不重要，重要是保持一致，避開關鍵詞，用于接收父組件v-model=后面傳過來的值) model: {https://s-z-q.blog.csdn.net/article/details/108277420

總結

以上是生活随笔為你收集整理的【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。