Angular 2 中动态渲染输入元素的指令

Question

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

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

那么，如何在指令中获取单个 html 输入元素引用？ 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)
}

Answer 1

我重新创建了您的用例，您提供的代码对我来说看起来不错。我为它创建了一个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}"]`
    )
  );
}