/**/

因为我使用的输入有很多相同的指令和.应用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 13 中