Лучший альтернативный способ конвертировать строку в элемент DOM в Angular 7 с Renderer2 - PullRequest
0 голосов
/ 05 февраля 2019

Я использую приведенный ниже код в моей директиве Angualr 7 для выполнения всплывающей подсказки с помощью Renderer2.Но на самом деле мне нужно простое решение, чтобы реализовать это решение и убедиться, что оно будет работать и с браузером Android и iOS.

Текущее решение:

private div = this.renderer.createElement("div");

this.renderer.addClass(this.div, "tooltip");
this.renderer.addClass(this.div, "fade");
this.renderer.addClass(this.div, "bs-tooltip-top");
this.renderer.setStyle(this.div, "bottom", "initial");
this.renderer.setStyle(this.div, "top", "0");
this.renderer.setStyle(this.div, "right", "0");
const arrowDiv = this.renderer.createElement("div");
this.renderer.addClass(arrowDiv, "arrow");
this.renderer.setStyle(arrowDiv, "left", "50%");
this.renderer.setStyle(arrowDiv, "transform", "translateX(-50%)");
const tooltipDiv = this.renderer.createElement("div");
this.renderer.addClass(tooltipDiv, "tooltip-inner");
const text = (this._option.hasOwnProperty('message')) ? this._option.message : "This field is required";
const tooltipText = this.renderer.createText(text);
this.renderer.appendChild(tooltipDiv, tooltipText);
this.renderer.appendChild(this.div, arrowDiv);
this.renderer.appendChild(this.div, tooltipDiv);
this.renderer.insertBefore(this._el.nativeElement.parentNode, this.div, this._el.nativeElement);

Но я хочу лучшее решение дляпреобразовать строку HTML в элемент DOM с коротким кодом, например:

let div = this.renderer.createElement("div");
const message = "This field is required";
const toolTip = `<div class="tooltip fade bs-tooltip-top show" style="bottom: initial; top: 0px; right: 0px;">
                    <div class="arrow" style="left: 50%; transform: translateX(-50%);"></div>
                    <div class="tooltip-inner">${message}</div>
                </div>`;
// Here i want to convert this string to DOM element
domElement = create dome element from toolTip and then
    this.renderer.appendChild(div, domElement);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...