Добавление кнопки для размещения элемента с использованием угловой директивы - PullRequest
Новая
       9

Добавление кнопки для размещения элемента с использованием угловой директивы

0 голосов
/ 10 июня 2018

Я разрабатываю директиву, функциональность которой заключается в добавлении двух кнопок к элементу host / parent.Элемент host / parent будет элементом textarea.Я пытался добиться с помощью методов renderer2 createElement, appendChild.Renderer two создает эти кнопки и добавляет к элементу хоста вот так. 

<textarea _ngcontent-c0="" appmarkdown=""><div _ngcontent-c0=""><button _ngcontent-c0="">Hello world</button></div></textarea>

Но эта кнопка не видна.Может ли кто-нибудь помочь мне с этим.

код для моей директивы. 

enter code here          import { Directive, Output, EventEmitter, Renderer2, ElementRef, OnInit } from '@angular/core';

      @Directive({
        selector: '[appMarkDown]',
        host:{
          '(keyup)': 'onKey($event.target.value)'
        }
      })
      export class MarkDownDirective implements OnInit {

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

        @Output() valuechange:EventEmitter<any> = new EventEmitter();

        private nativeElement : Node;

        ngOnInit() {
          this.nativeElement = this.element.nativeElement;
          const div = this.renderer.createElement('div');
          const button= this.renderer.createElement('button');
          const text = this.renderer.createText('Hello world');
          this.renderer.appendChild(button, text);
          this.renderer.appendChild(div, button);
          this.renderer.appendChild(this.nativeElement, div);
          this.renderer.nextSibling(this.nativeElement)
        }

        onKey(event:KeyboardEvent){
          this.valuechange.emit(event);
        }
      }

1 Ответ

0 голосов
/ 10 июня 2018

Поскольку вы пытаетесь добавить кнопку рядом с <textarea></textarea>, используя директиву атрибута.Правильный подход заключается в создании компонента, а не в создании директивы.Компонентный подход используется всеми платформами.

Директива Attribute изменяет внешний вид или поведение элемента DOM.

Но здесь вы фактически меняете структурусам.Если это то, что вы хотите сделать только с помощью директивы атрибута, тогда вы должны применить директиву к <div>, где вы можете вставить <textarea> и <button> в нее.

Если вы этого не сделаетеЕсли вы хотите изменить свой код, тогда вы должны пойти с 

 ngOnInit() {
          this.nativeElement = this.element.nativeElement;
          const div = this.renderer.createElement('div');
          const button= this.renderer.createElement('button');
          const text = this.renderer.createText('Hello world');
          this.renderer.appendChild(button, text);
          this.renderer.appendChild(div, button);
          this.renderer.insertBefore(this.element.nativeElement.parentNode, div, this.element.nativeElement.nextSibling);
        }

Вот ссылка для рабочего решения

...