Angular 用组件替换字符串的一部分？

Question

我需要在 Angular 中实现一个标签系统，比如在 Instagram 或 Twitter 或任何地方。

不确定什么是正确的方法。

假设我们有一个这样的字符串：Hello #xyz how are you doing?。

我希望将 #xyz 替换为 <tag-component [input]="xyz"></tag-component>。

所以最终输出看起来像这样 Hello <tag-component [input]="xyz"></tag-component> how are you doing?。

当然，我们可以在里面有很多 #things。

如何做到这一点？

Answer 1

HTML

 <p id="msg"></p>

javascript

function(tag: string) {
    const str = tag.slice(1); //removes # from string
    document.getElementById("msg")
    element.innerHTML = "Hello <tag-component [input]=\"xyz\"></tag-component> how are you doing?"
}

输出

Answer 2

据我所知，这是不可能的："Hello <tag-component [input]=\"xyz\"></tag-component> how are you doing?" 是不可能的，因为 angular 无法通过 innerHTML 识别 angular 组件标签 <tag-component> 。

可能还有其他方法来实现这一点，例如使用自定义指令：

按照custom-directve的代码：

@Directive({
  selector: "[myDirective]"
})
export class MyDirective implements OnInit {
  @Input() tag: string;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    this.renderer.setProperty(
      this.el.nativeElement,
      "innerHTML",
      `<h1>your tage here --> ${this.tag}</h1>`
    );
  }
}

您可以在组件模板中将其用作：<div myDirective tag="test"></div>来呈现您的预期标签。