Angular 4使用渲染器在每行之前添加图像 [英] Angular 4 adding an image before each new line using renderer

问题描述

我正在尝试在每行之前添加图片 所以我能够做到这一点

I am trying to add an image before each new line So I am able to achieve this

Apple
Ball
Cat
Dog

但是我想在每行之前添加图片

but I want to add image before in every new line

(img) Apple
(img) Ball
(img) Cat
(img) Dog

代码

this.tooltipTitle = "Apple,Ball,Cat,Dog,Elephant"

create() {
  this.tooltip = this.renderer.createElement('div');
  this.tooltipTitle.split(',').forEach((text) => {
  this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
  this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
  this.renderer.appendChild(document.body, this.tooltip);
 });
}

this.renderer.addClass(this.tooltip,'classA')

 .classA{
   positon:absolute;
   max-width: 150px;
   font-size: 14px;
   color: black;
   padding: 3px 8px;
   background: grey;
   border-radius: 4px;
   z-index: 100;
   opacity: 0;
 }

所以addClass会在整个工具提示中添加样式.这很好，我进一步尝试的工作是在新行的开头也添加图片

So the addClass is adding styles to the whole tooltip.That is good and working what I am further trying is to add an image at beginning of new line as well

尝试了很多之后，我就可以添加图像了，但是它只是被添加到了最后一个值上，而不是以前的值(而我想在每行上添加图像).

After trying a lot I am able to add the image "but" it is only getting added to the last value not to the previous values(whereas I want to add image on every new line).

this.tooltip = this.renderer.createElement('div');
this.imgforres = this.renderer.createElement('img');
this.imgsrc = 
this.renderer.setAttribute(this.imgforres,"src",
"assets/images/restriction.png")

this.tooltipTitle.split(',').forEach((text) => {
this.renderer.appendChild(this.tooltip,this.imgforres);
this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
this.renderer.appendChild(document.body, this.tooltip);
});

最新

现在我已经实现了在每行新文本之前获得图像，感谢Yuri的回复 最后一个小故障是，如果文本很长一定会自动换行，但缩进不是上面的行文本，那么缩进会在图像下方开始

Latest

Now I have achieved I get the image before every new line of text, Thanks to Yuri for his response One last glitch is if the text is long it surely wraps up but the indentation is not with the above line text, it starts below the image

<img> Apple
<img> Ball
<img> So this a long text
and it starts from below 
the image
<img> Cat

预期

<img> Apple
<img> Ball
<img> So this a long text
      and it starts from 
      below the image
<img> Cat

我已经尝试过断字，辩解，这无济于事，也许我必须将此文本嵌入div或p标签中，然后为其指定样式.

I have tried word-break, justify , it's not helping , maybe I'll have to embed this text in a div or p tag and then give styling to those.

推荐答案

      this.tooltip = this.renderer.createElement('div');
      this.tooltipTitle.split(',').forEach((text) => {
      this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      var img2 = document.createElement('img'); // Use DOM HTMLImageElement
      img2.src = 'image2.jpg';
      img2.alt = 'alt text';
      this.renderer.appendChild(this.tooltip,img2);
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      this.renderer.appendChild(document.body, this.tooltip);
    });

另一种布局

这篇关于Angular 4使用渲染器在每行之前添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！