Angular2 +中动态渲染输入元素的指令 更新

编程问答 2022-06-06

问题描述

我正在尝试在div容器中的按钮单击上插入HTML输入元素。我创建了一个指令，并在子输入元素上添加了该指令。每当我单击input元素时，都应将该元素从DOM中删除。

我能够实现此行为，但是每当我单击一个HTML Input Element时，所有HTML元素都会从DOM中删除，这是不希望的。

那么，如何在指令中获取单个html输入elementref？ app.component.html 

<div class="btn-container">
  <button (click)="addInputElement()">Add Input</button>
</div>
<div class="Box-container">
    <input deleteDir *ngFor="let el of inputEl; let i = index" id={{i}} [value]=el.value>{{el.value}}/>
</div>

app.component.ts 

export class AppComponent implements OnInit{
   inputEl = [];
   addInputElement() {
     this.inputEl.push({value: Math.random()});
   }
}

app.directive.ts 

constructor(private elementRef: ElementRef,private renderer: Renderer2) { }


@HostListener('click') onClick() {
    this.renderer.removeChild(this.elementRef.nativeElement.parentNode,this.elementRef.nativeElement)
}

解决方法

我重新创建了您的用例，您提供的代码对我来说很好。我为此创建了一个StackBlitz，您可以检查一下。当我单击一个input元素时，只有我单击的元素被删除。

更新

我已经从上方更新了StackBlitz。现在，如果您按一个键，输入字段将被一一删除。基本上我要做的就是将索引传递给指令

HTML

<...>
    *ngFor="..."
    delete      <-- directive
    [index]="i" <-- input parameter in directive
</...>

DIRECTIVE

@Input()
index: number;

constructor(private elementRef: ElementRef,private renderer: Renderer2) {}

@HostListener("input")
onInput() {
   this.renderer.removeChild(
    this.elementRef.nativeElement.parentNode,this.elementRef.nativeElement.parentNode.querySelector(
      `[id="${this.index}"]`
    )
  );
}
angularangularjs-directive