Angular 2 中动态渲染输入元素的指令
Directive on Dynamically Rendered Input Element in Angular2+
我正在尝试在 div 容器内单击按钮时插入 HTML 输入元素。我创建了一个指令并在子输入元素上添加了指令。每当我点击输入元素时,该元素应该从 DOM.
中删除
我能够实现此行为,但每当我单击一个 HTML 输入元素时,所有 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}"]`
)
);
}
我正在尝试在 div 容器内单击按钮时插入 HTML 输入元素。我创建了一个指令并在子输入元素上添加了指令。每当我点击输入元素时,该元素应该从 DOM.
中删除我能够实现此行为,但每当我单击一个 HTML 输入元素时,所有 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}"]`
)
);
}