如何使用 Angular 6 工作的 ngModel 创建自定义输入组件

发布于11月11日

因为我使用的输入有很多相同的指令和.应用css类，我想将重复代码提取到如下组件:

  @Component({
  selector: "app-input",
  template: `
    <div class="...">
      <input type="..." name="..." class="..." [(ngModel)]="value" someDirectives...>
      <label for="...">...</label>
    </div>
  `,
  ...
  })
  export class InputComponent implements OnInit {
    // some implementation connecting external ngModel with internal "value" one
  }

这里的问题是，创建一个组件时，它可以与ngModel一起用作普通输入:

<app-input [(ngModel)]="externalValue" ... ></app-input>

我在互联网上找到了几种可能部分或完全过时的解决方案，比如:

推荐答案

这也可以这样做，当你创建一个双向绑定[()]时，你可以使用相同的名称+change(在我们的例子中是inputModel和inputModelChange)将它绑定到一个函数，这样当你触发inputModelChange时，ngModel就会更新.emit('updatedValue').只需在组件中声明一次.

app-input.component.ts个

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

@Component({
  selector: 'app-input',
  template: `  <input type="text" [(ngModel)]="inputModel" (ngModelChange)="inputModelChange.emit(inputModel)"/>`,
  styleUrls: ['./app-input.component.scss']
})
export class AppInputComponent {
  @Input() inputModel: string;
  @Output() inputModelChange = new EventEmitter<string>();
}

app.component.html

<app-input [(inputModel)]="externalValue"></app-input>

Angular相关问答推荐

出错后可观察到的重用

Angular 不使用NgRx的简单CRUD应用程序

Aws 代码部署在 BeforeBlockTraffic 步骤失败，即使在更新策略后也会超时

在一个组件中创建多个表单

在组件级别加载 JS 脚本(不在启动时)

在 Angular material表上调用 renderRows()

如何使用ngrx和effects 订阅成功回调

为什么用？模板绑定中的运算符？

在 Angular 组件模板中添加脚本标签

Firebase 查询子项的子项是否包含值

ngClass 中的多个条件 - Angular 4

Ng serve throwing @angular/core/core 没有导出成员 'eeFactoryDef'

使用 mat-tab-group 以编程方式在 Angular 2 material中 Select mat-tab

angular2 在特定元素上手动触发点击事件

如何使用 ngFor 将 Typescript Enum 作为字符串数组进行迭代

如何以 Angular 方式获取 Angular2 路由的参数？

angular-cli 服务器 - 如何将 API 请求代理到另一台服务器？

Angular 2如果路径不存在，如何重定向到404或其他路径

想要将项目从 Angular v5 升级到 Angular v6

迭代Angular中的对象

实用课程推荐