如何使用 Angular Renderer2 在最后一个子元素之后追加?
How to append after last child element with Angular Renderer2?
我正在尝试使用 Angular7 指令在输入字段后附加一个按钮。问题是 Renderer2 方法 appendChild 将按钮放在输入字段之前。
Button before input field image
import { Directive, ElementRef, Input , HostListener, Renderer2, OnInit, OnDestroy } from '@angular/core';
@Directive({
selector: '[appInlineEdit2]'
})
export class InlineEdit2Directive {
@Input() value: any;
private spanElement: Node;
private spanText: Node;
// private children: Node[];
constructor(private el: ElementRef,
public renderer: Renderer2) {
this.spanElement = this.renderer.createElement('span');
// this.spanText = this.renderer.createText('dummy_span');
// this.renderer.appendChild(this.spanElement, this.spanText);
this.renderer.setAttribute(this.spanElement, 'id', 'anchor');
this.renderer.appendChild(this.el.nativeElement, this.spanElement);
// this.renderer.insertBefore(this.el.nativeElement, this.spanElement, null);
this.renderer.listen(this.spanElement, 'click', this.onClick.bind(this));
const button = this.renderer.createElement('button');
this.renderer.setAttribute(button, 'type', 'button');
this.renderer.addClass(button, 'btn');
this.renderer.addClass(button, 'btn-primary');
const buttonText = this.renderer.createText('OK');
this.renderer.appendChild(button, buttonText);
this.renderer.listen(button, 'click', this.onClickOK.bind(this));
this.renderer.appendChild(this.el.nativeElement, button);
// this.renderer.insertBefore(this.el.nativeElement, button, null);
}
ngOnInit() {
console.log(this.el.nativeElement.childNodes);
// this.showMode();
}
}
并且在模板中:
<div class="input-group col-6" appInlineEdit2 [value]="model">
<input type="text" class="form-control" placeholder="Recipient's username"
[(ngModel)]="model" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
我希望按钮位于 DOM 中的输入字段之后。
您的代码存在问题,您正在构造函数中执行 Renderer2
相关逻辑。构造函数在组件创建期间被调用,此时组件 DOM 尚未初始化,这意味着 ElementRef
和 nativeElement
存在于某处但不在 DOM 中。这就是您遇到这种模棱两可的行为的原因。
有关详细信息,请参阅 。
因此,将 Renderer2
相关逻辑放在 ngOnInit
中可以解决您的问题。
我正在尝试使用 Angular7 指令在输入字段后附加一个按钮。问题是 Renderer2 方法 appendChild 将按钮放在输入字段之前。
Button before input field image
import { Directive, ElementRef, Input , HostListener, Renderer2, OnInit, OnDestroy } from '@angular/core';
@Directive({
selector: '[appInlineEdit2]'
})
export class InlineEdit2Directive {
@Input() value: any;
private spanElement: Node;
private spanText: Node;
// private children: Node[];
constructor(private el: ElementRef,
public renderer: Renderer2) {
this.spanElement = this.renderer.createElement('span');
// this.spanText = this.renderer.createText('dummy_span');
// this.renderer.appendChild(this.spanElement, this.spanText);
this.renderer.setAttribute(this.spanElement, 'id', 'anchor');
this.renderer.appendChild(this.el.nativeElement, this.spanElement);
// this.renderer.insertBefore(this.el.nativeElement, this.spanElement, null);
this.renderer.listen(this.spanElement, 'click', this.onClick.bind(this));
const button = this.renderer.createElement('button');
this.renderer.setAttribute(button, 'type', 'button');
this.renderer.addClass(button, 'btn');
this.renderer.addClass(button, 'btn-primary');
const buttonText = this.renderer.createText('OK');
this.renderer.appendChild(button, buttonText);
this.renderer.listen(button, 'click', this.onClickOK.bind(this));
this.renderer.appendChild(this.el.nativeElement, button);
// this.renderer.insertBefore(this.el.nativeElement, button, null);
}
ngOnInit() {
console.log(this.el.nativeElement.childNodes);
// this.showMode();
}
}
并且在模板中:
<div class="input-group col-6" appInlineEdit2 [value]="model">
<input type="text" class="form-control" placeholder="Recipient's username"
[(ngModel)]="model" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
我希望按钮位于 DOM 中的输入字段之后。
您的代码存在问题,您正在构造函数中执行 Renderer2
相关逻辑。构造函数在组件创建期间被调用,此时组件 DOM 尚未初始化,这意味着 ElementRef
和 nativeElement
存在于某处但不在 DOM 中。这就是您遇到这种模棱两可的行为的原因。
有关详细信息,请参阅
因此,将 Renderer2
相关逻辑放在 ngOnInit
中可以解决您的问题。