angular - 手动触发输入变化事件
问题描述
我正在尝试制作一个自定义计数器输入组件,并且我正在努力让输入值由自定义递增/递减按钮控制。
这就是我想要做的:
我想使用内容投影并公开输入,以便在表单中使用它并添加属性,就像在常规数字输入上一样。所以关于输入的指令似乎是要走的路:
<my-counter-input>
<input [(ngModel)]="count" myInputRef />
</my-counter-input>
组件本身将有两个按钮和一个ng-content
-slot:
<button (click)="decrement()">-</button>
<ng-content select="input"></ng-content>
<button (click)="increment()">+</button>
到目前为止,一切似乎都很好。现在我可以使用@ContentChild
装饰器与指令进行交互。
@Component({
selector: 'my-counter-input',
templateUrl: './counter-input.component.html',
styleUrls: ['./counter-input.component.scss'],
})
export class CounterInputComponent {
@ContentChild(InputRefDirective)
public input: InputRefDirective;
constructor() {}
public increment() {
this.input.increment();
}
public decrement() {
this.input.decrement();
}
}
我想这就是问题出现的地方。我将输入元素的值绑定到指令,但增量/减量方法都不会对本机输入值产生任何影响。我想对本机输入值进行双向绑定,但似乎并非如此。
@Directive({
selector: 'input [myInputRef]',
})
export class InputRefDirective {
@HostBinding('type') readonly type = 'number';
@HostBinding('value') value = 5;
public increment() {
this.value++;
}
public decrement() {
this.value--;
}
}
我不确定我应该怎么做。如何更新本机输入的值并触发本机更改事件?
解决方案
所有基于 FormControl 的指令扩展的基类。它将 FormControl 对象绑定到 DOM 元素。
我们可以在指令中注入 NgControl,Angular DI 框架将为我们提供最接近的表单控制指令。然后我们可以动态地将值设置为formControl。
import { Directive, HostBinding, AfterViewInit } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: "[appInput]"
})
export class InputDirective implements AfterViewInit {
@HostBinding("type") readonly type = "number";
value = 5;
ngAfterViewInit(){
setTimeout(()=>{this.control.control.setValue(this.value)})
}
constructor(private control: NgControl) {
}
public increment() {
this.control.control.setValue(this.value++);
}
public decrement() {
this.control.control.setValue(this.value--);
}
}
推荐阅读
- azure - 如何使用多个密钥库并使用循环?地形
- android-external-storage - google play store 警告 - 从 5 月 5 日开始,您必须让我们知道您的应用为何需要广泛的存储访问权限
- android - 如何在 Garuda Linux 中设置全局环境变量?
- android - 尝试在应用程序上实现 Google 登录但不断收到 ApiException:10,从 Gihub 中提取是否会改变必须使用的内容?
- java - 为什么我的 Java 程序在创建 JAR 时不起作用?
- haskell - 将函数应用于列表的所有元素并根据函数的返回类型返回一个新列表
- java - 将 POJO 转换为 JSON 以进行对象比较?
- c++ - 如何将对象及其方法转换为仅使用方法参数即可调用的函数
- c++ - bcc32 编译器和 tlink32 链接器选项在 linux 中分别等效于 gcc 和 ld
- r - 获取标签作为列值而不是数值