我需要创建一个 Angular 指令来清除在图标按钮单击时输入字段中输入的内容

Question

我创建了一个指令，只有在输入字段中有任何内容时才会显示清除按钮图标。我还需要在单击按钮时清除输入内容。

由于宿主元素本身不是输入值，因此内部指令中的值设置为空，但未反映在组件中。

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');
       }
    }
  }
}

Answer 1

这个问题符合。对我来说 clearInput 没有绑定到你的 inputVal 它只是取一个值并在指令中相应地执行。对于您的工作方法，您需要在指令中完整参考 inputVal。

现在它只是一个原始值，这就是为什么当您将值更改为 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>

clear directive——只是我取了一个常量，比如 html 就像 div[input , close] 当你点击关闭输入时变空

    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 节点不是静态的，则根据 class 我使用的名称在下面使用 class 名称 --- alwaysCloseButtonWillBethere

     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);
      }
  }
}

我需要创建一个 Angular 指令来清除在图标按钮单击时输入字段中输入的内容

I need to create a Angular directive to clear content entered in input field in icon button click

angular-directive

angular-material

angular

如果 dom 节点不是静态的，则根据 class 我使用的名称在下面使用 class 名称 --- alwaysCloseButtonWillBethere