在Angular 7中，动态地将文本墙中的每个单词转换为（单击）一个调用角度函数的（单击）-使用什么？

寻找“有棱角的方式”。使用Angular 7，但如果您知道不同版本中的方法，也会非常有帮助。对Angular来说是新的，但对Javascript或编程来说不是新的

我有很多文本，我很可能需要使用某种形式的分页，但我还没有。我想把每个单词变成一个链接。文本确实会更改，并且将来自服务器

收到的文本示例：

培根伊普苏姆多洛艾美汉堡包牛短里脊，潘切塔火腿鹿肉芝士里脊水牛柳米格农屠鸭短排骨猪排兰杰格舌布尔多根。牛扒猪排猪肚香肠条牛排猪肉水牛查克牛排骨熏牛肉。排骨kielbasa猪球尖。猪肚肥背肉干腌牛肉。牛排腰肉、猪排、排骨、丘比特肉、里脊肉、猪肚、火腿、飞节三尖

生成的html需要“编译”成角形的示例：

<span (click)='onClick("Bacon")'>Bacon</span> <span (click)='onClick("ipsum")'>ipsum</span> <span (click)='onClick("dolor")'>dolor</span> <span (click)='onClick("amet")'>amet</span> <span (click)='onClick("hamburger")'>hamburger</span> <span (click)='onClick("cow")'>cow</span> <span (click)='onClick("short")'>short</span> <span (click)='onClick("loin")'>loin</span>, <span (click)='onClick("pancetta")'>pancetta</span> <span (click)='onClick("ham")'>ham</span> <span (click)='onClick("venison")'>venison</span> <span (click)='onClick("chislic")'>chislic</span> <span (click)='onClick("buffalo")'>buffalo</span> <span (click)='onClick("filet")'>filet</span> <span (click)='onClick("mignon")'>mignon</span> <span (click)='onClick("turducken")'>turducken</span> <span (click)='onClick("short")'>short</span> <span (click)='onClick("ribs")'>ribs</span> <span (click)='onClick("pork")'>pork</span> <span (click)='onClick("chop")'>chop</span> <span (click)='onClick("landjaeger")'>landjaeger</span> <span (click)='onClick("tongue")'>tongue</span> <span (click)='onClick("burgdoggen")'>burgdoggen</span>. <span (click)='onClick("Turducken")'>Turducken</span> <span (click)='onClick("pork")'>pork</span> <span (click)='onClick("chop")'>chop</span> <span (click)='onClick("pork")'>pork</span> <span (click)='onClick("belly")'>belly</span> <span (click)='onClick("sausage")'>sausage</span> <span (click)='onClick("strip")'>strip</span> <span (click)='onClick("steak")'>steak</span> <span (click)='onClick("pork")'>pork</span> <span (click)='onClick("buffalo")'>buffalo</span> <span (click)='onClick("chuck")'>chuck</span> <span (click)='onClick("cow")'>cow</span> <span (click)='onClick("short")'>short</span> <span (click)='onClick("ribs")'>ribs</span> <span (click)='onClick("pastrami")'>pastrami</span>. <span (click)='onClick("Spare")'>Spare</span> <span (click)='onClick("ribs")'>ribs</span> <span (click)='onClick("kielbasa")'>kielbasa</span> <span (click)='onClick("swine")'>swine</span> <span (click)='onClick("ball")'>ball</span> <span (click)='onClick("tip")'>tip</span>. <span (click)='onClick("Pork")'>Pork</span> <span (click)='onClick("belly")'>belly</span> <span (click)='onClick("fatback")'>fatback</span> <span (click)='onClick("jerky")'>jerky</span> <span (click)='onClick("boudin")'>boudin</span> <span (click)='onClick("corned")'>corned</span> <span (click)='onClick("beef")'>beef</span>. <span (click)='onClick("Beef")'>Beef</span> <span (click)='onClick("ribs")'>ribs</span> <span (click)='onClick("flank")'>flank</span> <span (click)='onClick("pork")'>pork</span>, <span (click)='onClick("pork")'>pork</span> <span (click)='onClick("chop")'>chop</span> <span (click)='onClick("spare")'>spare</span> <span (click)='onClick("ribs")'>ribs</span> <span (click)='onClick("cupim")'>cupim</span> <span (click)='onClick("tenderloin")'>tenderloin</span> <span (click)='onClick("pork")'>pork</span> <span (click)='onClick("belly")'>belly</span> <span (click)='onClick("ham")'>ham</span> <span (click)='onClick("hock")'>hock</span> <span (click)='onClick("tri")'>tri</span>-<span (click)='onClick("tip")'>tip</span>.

编辑2

这就足够了，这可能是一个可能的解决方案的开始

  ngOnInit() { 
    this.textMap = this.textToDict(); 
    this.createComponent("m");
    this.createComponent("    f");
  }

---

您不需要编译组件。您只需创建span元素并在父组件上注册侦听器。给你。它应该在性能、使用渲染器等方面得到改进，但它应该给您提供一些想法

@Component({
  selector: 'my-text',
  template: ''
})
export class TextComponent implements OnInit, AfterViewInit {
  @Input() text: string;
  spans: Array<HTMLSpanElement>;

  constructor(private element: ElementRef<HTMLElement>) {
  }

  ngOnInit() {
    this.spans = this.text.split(' ').map(text => {
      const span = document.createElement('span');
      span.innerText = text;
      return span;
    });
  }

  ngAfterViewInit() {
    this.spans.forEach(span => {
      this.element.nativeElement.appendChild(span);
      this.element.nativeElement.appendChild(document.createTextNode(' '));
    })
  }

  @HostListener('click', ['$event.target'])
  onClick(target: HTMLElement) {
    console.log('clicked on ' + target.innerText);
  }
}

@组件({
选择器：“我的文本”，
模板：“”
})
导出类TextComponent实现OnInit，AfterViewInit{
@Input（）文本：字符串；
跨度：阵列；
构造函数（私有元素：ElementRef）{
}
恩戈尼尼特（）{
this.span=this.text.split（“”）.map（text=>{
const span=document.createElement（'span'）；
span.innerText=文本；
返回跨度；
});
}
ngAfterViewInit（）{
this.span.forEach（span=>{
this.element.nativeElement.appendChild（span）；
this.element.nativeElement.appendChild（document.createTextNode（“”））；
})
}
@HostListener（'单击'，['$event.target']））
onClick（目标：HTMLElement）{
log（'单击'+target.innerText'）；
}
}

您不需要编译组件。您只需创建span元素并在父组件上注册侦听器。给你。它应该在性能、使用渲染器等方面得到改进，但它应该给您提供一些想法

@Component({
  selector: 'my-text',
  template: ''
})
export class TextComponent implements OnInit, AfterViewInit {
  @Input() text: string;
  spans: Array<HTMLSpanElement>;

  constructor(private element: ElementRef<HTMLElement>) {
  }

  ngOnInit() {
    this.spans = this.text.split(' ').map(text => {
      const span = document.createElement('span');
      span.innerText = text;
      return span;
    });
  }

  ngAfterViewInit() {
    this.spans.forEach(span => {
      this.element.nativeElement.appendChild(span);
      this.element.nativeElement.appendChild(document.createTextNode(' '));
    })
  }

  @HostListener('click', ['$event.target'])
  onClick(target: HTMLElement) {
    console.log('clicked on ' + target.innerText);
  }
}

@组件({
选择器：“我的文本”，
模板：“”
})
导出类TextComponent实现OnInit，AfterViewInit{
@Input（）文本：字符串；
跨度：阵列；
构造函数（私有元素：ElementRef）{
}
恩戈尼尼特（）{
this.span=this.text.split（“”）.map（text=>{
const span=document.createElement（'span'）；
span.innerText=文本；
返回跨度；
});
}
ngAfterViewInit（）{
this.span.forEach（span=>{
this.element.nativeElement.appendChild（span）；
this.element.nativeElement.appendChild（document.createTextNode（“”））；
})
}
@HostListener（'单击'，['$event.target']））
onClick（目标：HTMLElement）{
log（'单击'+target.innerText'）；
}
}

好的-很酷。我不确定渲染器是什么（angular是新的），但我会假设你的意思，并将其保存一天，看起来很容易完成是的，这就是我所说的。好吧-酷。不确定渲染器是什么（angular是新的），但我会假设你的意思，并将其保存一天，看起来很容易做到是的，这就是我要说的。