Как добавить после последнего дочернего элемента с Angular Renderer2? - PullRequest
Новая
       21

Как добавить после последнего дочернего элемента с Angular Renderer2?

1 голос
/ 09 июля 2019

Я пытаюсь добавить кнопку после поля ввода с директивой Angular7. Проблема в том, что метод Renderer2 appendChild помещает кнопку перед полем ввода.

Кнопка перед полем ввода изображения 

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.

1 Ответ

0 голосов
/ 10 июля 2019

проблема с вашим кодом в том, что; Вы выполняете Renderer2 связанную логику в конструкторе. конструктор вызывается при создании компонента, и в этот момент компонент DOM еще не был инициализирован. это означает, что ElementRef и nativeElement существуют где-то, но еще не в DOM. Вот почему вы испытываете такое неоднозначное поведение.

см. этот пост для получения более подробной информации

Итак, размещение Renderer2 логики внутри ngOnInit решает вашу проблему.

вот рабочая демоверсия https://stackblitz.com/edit/angular-ywn1ky

...