代码之家 › 专栏 › 技术社区 › Stefan Orzu

<input>标签的扩展功能

angular javascript

0

Stefan Orzu · 技术社区 · 7 年前

我想创建一个包含 <input> 标记并向其添加额外功能,例如明文值“X”图标或任何其他自定义操作和标记,同时保留相同的事件绑定( (click) , (keyup) ,等等)本地输入元素的。例子:

<my-input (keyup)="handleKeystroke($event)" (click)="handleClick($event)" [customProp]="...">

在不为所有可能的事件绑定在内部为子输入元素显式创建自定义输出和事件处理程序的情况下,可以这样做吗?

欢迎提出任何建议。谢谢!

3 回复 | 直到 7 年前

1

3

Narendra Singh Rathore 7 年前

可以,使用controlvalueaccessor接口

下面是在组件类中实现时需要添加的示例代码

const TYPE_CONTROL_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => YourComponent ),
  multi: true
};

@Component({
  selector: 'custom-control',
  templateUrl: './custom-control.component.html',
  styleUrls: ['./custom-control.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [TYPE_CONTROL_ACCESSOR]
})

 export class YourComponent implements ControlValueAccessor {

 private onTouch: Function;
 private onModelChange: Function;

 writeValue(obj: string): void {
      this.value = obj;
 }
 registerOnChange(fn: any): void {
      this.onModelChange = fn;
 }
 registerOnTouched(fn: any): void {
 this.onTouch = fn;
 }

您可以从模板(HTML)绑定事件并在组件中捕获它们

2

1

Jaroslav M 7 年前

它可以使用ControlValueAccessor完成。看一下文档 https://angular.io/api/forms/ControlValueAccessor . 试试谷歌搜索。

3

-1

Skatt 7 年前

这里有一个很好的自定义事件示例: Angular event emitter