angular中使用 ngModel 自定义组件

Angular自定义组件与ngModel双向数据绑定教程

最新推荐文章于 2025-10-08 22:29:24 发布

原创

最新推荐文章于 2025-10-08 22:29:24 发布 · 1.7k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了如何在Angular中创建一个自定义组件，实现ngModel双向数据绑定，包括实现ControlValueAccessor接口、模板设计和在父组件中使用。

要创建一个自定义的 Angular 组件，并使用 ngModel 进行双向数据绑定，您可以按照以下步骤操作：

创建自定义组件：首先，使用 Angular CLI 或手动创建一个新的组件。在组件的模板中，添加一个输入元素或其他适合您的控件，并为其添加一个唯一的标识符，例如一个模板引用变量。
导入必要的模块和服务：在您的组件类中，导入 ControlValueAccessor 和 NG_VALUE_ACCESSOR。这些是从 @angular/forms 模块中提供的。

import {
   
    Component, forwardRef } from '@angular/core';
import {
   
    ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

实现 ControlValueAccessor 接口：为了使您的自定义组件能够与 ngModel 指令一起使用，您需要实现 ControlValueAccessor 接口。该接口定义了一组方法，用于处理控件值的获取和设置，以及处理表单控件状态的更改。您可以实现这些方法以满足您的需求。

@Component({
   
   
  selector: 'app-custom-input',
  template: `
    <input type="text" [(ngMode