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

<input>标签的扩展功能

angular javascript

Stefan Orzu · 技术社区 · 6 年前

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

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

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

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

3 回复 | 直到 6 年前

Narendra Singh Rathore 6 年前

可以,使用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)绑定事件并在组件中捕获它们

Jaroslav M 6 年前

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

-1

Skatt 6 年前

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前