Question

create() {
 this.tooltip = this.renderer.createElement('div');
 this.renderer.appendChild( 
 this.tooltip,this.renderer.createText(this.tooltipTitle);
);

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

例如：在我的应用程序中

this.tooltipTitle =“苹果，球，猫，狗，大象”

预期结果

Apple 
Ball
Cat
Dog

Answer 1

尝试一下：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  tooltipTitle = "Apple,Ball,Cat,Dog,Elephant";
  tooltip: HTMLElement;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
    this.create();
  }

  create() {
    // creating the array
    let titles = this.tooltipTitle.split(",")
    // append each val of the resulting array to the tooltip
    titles.forEach(title => {
      const p = this.renderer.createElement('p');
      this.renderer.appendChild(
        p,
        this.renderer.createText(title),
      );
      this.renderer.appendChild(document.body, p);
    });

  }
}

更新：

您还可以在文本后创建<br>标签，并将其与当前代码更加对齐。像这样：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  tooltipTitle = "Apple,Ball,Cat,Dog,Elephant";
  tooltip: HTMLElement;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
    this.create();
  }

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

  }
}

以下是更新的Working Sample StackBlitz供您参考。

Answer 2

!!! 请注意，我的答案可能需要更正：我很久没使用Angular了，我忘记了大部分 !!!

但是我的答案会提示您如何做：

我认为整理标题可能会有所帮助

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

  // creating the array
  let titles = this.tooltipTitle.split(",")

  // append each val of the resulting array to the tooltip
  titles.forEach(title => {
    this.renderer.appendChild( 
      this.tooltip,
      this.renderer.createText(title);
    );
  });

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

使用Angular4渲染器在新行中渲染字符串的每个元素

2 个答案:

更新：