Angular 4 добавляет изображение перед каждой новой строкой с помощью рендерера

Я пытаюсь добавить изображение перед каждой новой строкой. Так что я могу добиться этого

Apple
Ball
Cat
Dog

но я хочу добавить изображение перед каждой новой строкой

(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 добавляет стили ко всей всплывающей подсказке. Это хорошо, и я пытаюсь добавить изображение в начало новой строки.

Редактировать

После многих попыток я могу добавить изображение, «но» оно добавляется только к последнему значению, а не к предыдущим значениям (тогда как я хочу добавлять изображение в каждую новую строку).

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);
});

Последний

Теперь я добился того, что получаю изображение перед каждой новой строкой текста. Спасибо Юрию за его ответ. Последний сбой: если текст длинный, он наверняка завершается, но отступ не с текстом выше строки, он начинается под изображением

<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

Я пробовал word-break, justify , это не помогает, возможно, мне придется встроить этот текст в тег div или p, а затем придать им стиль.


javascript angular html dom angular-renderer2
person Enthu    schedule 17.01.2019    source источник
comment
Рабочая ссылка stackblitz.com/edit/angular-kruybx   -  person Enthu    schedule 28.01.2019

Ответы (2)


arrow_upward
2
arrow_downward 

      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);
    });

введите здесь описание изображения

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

person Yuri S    schedule 28.01.2019
comment
Спасибо, это я уже сделал, я думаю, но мне нужно включить это в рендерер, как показано в моем коде, я создал тег изображения и присвоил атрибут src, но проблема в том, что он добавляется только к последнему value , я пытаюсь добавить тег изображения в каждую новую строку - person Enthu; 28.01.2019
comment
Обновил мой ответ. В вашем тестовом онлайн-проекте нет изображений, поэтому я просто использовал одно пустое. - person Yuri S; 29.01.2019
comment
Привет @Yuri S Я могу добавить стили, теперь только моя последняя проблема заключается в том, как я могу обернуть текст, если он слишком длинный, причина в том, что если текст длинный, он находится под изображением, есть ли способ, чтобы я мог обернуть длинный текст внутри этого div, спасибо - person Enthu; 29.01.2019
comment
Я пробовал разбить слово, обосновать, что он толкает оставшийся текст на следующую строку, но ниже изображения, я хочу идентифицировать его чуть ниже начальной точки первой строки, а не под изображением, надеюсь, я понимаю, что я пытаюсь сказать - person Enthu; 29.01.2019
comment
Это вопрос CSS. Я предлагаю создать новый вопрос и пометить его CSS. - person Yuri S; 29.01.2019

arrow_upward
0
arrow_downward

Вы можете попробовать что-то вроде этого -

create(){
  this.tooltip = this.renderer.createElement('div');

    this.tooltipTitle.split(',').forEach((text) => {
      let container = this.renderer.createElement('div');
      let img = this.renderer.createElement('img');
      this.renderer.setAttribute(img, "src", "assets/images/restriction.png");
      this.renderer.appendChild(container, img);

      let textSpan = this.renderer.createElement('span');
      this.renderer.appendChild(textSpan, this.renderer.createText(text));
      this.renderer.appendChild(container, textSpan);

      this.renderer.appendChild(this.tooltip, container);
    });

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

В html я сохранил встроенный css, который вы можете иметь в отдельном файле и загрузить его, вызвав this.renderer.addClass()

<style>
  span { 
    margin-left: 10px;
    display:inline-flex;
    width:150px;
    word-wrap:break-word;
} 
</style>

Вот моя тестовая подсказкаTitles -

tooltipTitle = "Яблоко,Мяч,Кошка,Собака,Слон Слон Слон Слон Слон Слон Слон Слон Слон Слон Слон Слон ";

И вот скриншот вывода

Вывод теста

person reezvi    schedule 04.02.2019