如何实现Angular4组件非input元素进行ngModel双向数据绑定的长尾？

本文共计1447个文字，预计阅读时间需要6分钟。

在Angular中，我们通常给input元素添加[ngModel]=value实现数据双向绑定。若想在自定义组件上实现ngModel双向数据绑定，可以采用以下步骤：

1. 在组件的ts文件中，定义一个属性来接收外部传入的值。

2.在组件的模板中，使用[(ngModel)]绑定这个属性。

3.在组件的ts文件中，实现属性的setter和getter方法，用于处理数据的变化。

以下是一个简单的示例：

组件的ts文件：

typescriptimport { Component } from '@angular/core';

@Component({ selector: 'app-custom-component', template: ` `})export class CustomComponent { customValue: string;

set value(newValue: string) { this.customValue=newValue; }

get value(): string { return this.customValue; }}

组件的模板：

其中，modelValue是父组件中的一个变量，用于接收来自CustomComponent的数据。