我创建了一个指令，仅当输入字段中有任何内容时，该指令才会显示清除按钮图标。我还需要在按钮单击时清除输入内容。
由于主机元素不是输入本身，因此值在指令中设置为空，但不反映在组件中。
.HTML
<mat-form-field>
<input matInput #inputVal type="text" placeholder="Clearable input" [(ngModel)]="value" />
<mat-icon [clearInput]= "inputVal.value" class="suffix" matSuffix >Close</mat-icon>
</mat-form-field>
命令
@Directive({
selector: '[clearInput]',
exportAs: 'clearInput'
})
export class clearInputDirective implements OnChanges{
@Input('clearInput') inputValue: any;
constructor(private el: ElementRef, private renderer:Renderer2) {
}
@HostListener('click') onClick() {
this.inputValue = null;
}
ngOnChanges(changes: SimpleChanges){
if(changes.inputValue){
if(this.inputValue){
this.renderer.setStyle(this.el.nativeElement, 'display', 'block');
}
else {
this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
}
}
}
}
这个问题对我来说很清楚输入不绑定到你的输入Val，它只是取一个值并在指令中相应地采取行动。 对于您的工作方法，您需要在指令中完全参考输入Val。
现在它只是一个原始值，这就是为什么当您将值更改为 null 时，它仅在指令级别。
[编辑]
尝试下面的代码。 - 当您使用ngmodel时，我们需要ngmodel的参考
<div class="input">
<input matInput clearInput [clearInput]= "value" #inputVal type="text" placeholder="Clearable input" [(ngModel)]="value" />
<div class="alwaysCloseButtonWillBethere"
matSuffix >Close</div>
</div>
清除指令 - 只是我取了一个常量，例如 HTML 就像div[输入，关闭]当您单击关闭输入时将变为空
import { Directive, OnChanges, Input, HostListener, ElementRef, Renderer2, SimpleChanges, OnInit, OnDestroy} from '@angular/core';
import { NgModel } from '@angular/forms';
@Directive({
selector: '[clearInput]',
exportAs: 'clearInput'
})
export class ClaerinputDirective implements OnChanges , OnInit , OnDestroy{
@Input('clearInput') inputValue: any;
constructor(private el: ElementRef, private renderer:Renderer2 , private model: NgModel) {
}
ngOnInit(){
this.el.nativeElement.parentNode.children[1].addEventListener('click', () =>{
this.model.control.reset();
})
}
ngOnChanges(changes: SimpleChanges){
if(changes.inputValue){
if(this.inputValue){
this.renderer.setStyle(this.el.nativeElement.parentNode.children[1], 'display', 'block');
}
else {
this.renderer.setStyle(this.el.nativeElement.parentNode.children[1], 'display', 'none');
}
}
}
ngOnDestroy() {
this.el.nativeElement.parentNode.children[1].removeEventListener('click',null
);
}
}
如果 dom 节点不是静态的，那么根据类名在它下面使用我总是---的类名关闭按钮将在那里
import { Directive, OnChanges, Input, HostListener, ElementRef, Renderer2, SimpleChanges, OnInit, OnDestroy} from '@angular/core';
import { NgModel } from '@angular/forms';
@Directive({
selector: '[clearInput]',
exportAs: 'clearInput'
})
export class ClaerinputDirective implements OnChanges , OnInit , OnDestroy{
@Input('clearInput') inputValue: any;
nodeToHideAndShow: HTMLElement;
constructor(private el: ElementRef, private renderer:Renderer2 , private model: NgModel) {
}
getNode(){
if(!this.nodeToHideAndShow){
this.nodeToHideAndShow = this.el.nativeElement.parentNode.querySelector('.alwaysCloseButtonWillBethere');
}
}
ngOnInit(){
this.getNode();
if(!this.nodeToHideAndShow){
// alert('Add a class alwaysCloseButtonWillBethere')
} else {
console.log('d');
this.nodeToHideAndShow.addEventListener('click', () => {
this.model.control.reset();
})
}
}
ngOnChanges(changes: SimpleChanges){
if(changes.inputValue){
this.getNode();
if(this.inputValue){
this.renderer.setStyle( this.nodeToHideAndShow, 'display', 'block');
}
else {
this.renderer.setStyle( this.nodeToHideAndShow, 'display', 'none');
}
}
}
ngOnDestroy() {
if( this.nodeToHideAndShow){
this.nodeToHideAndShow.removeEventListener('click',null);
}
}
}