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

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

不确定什么是正确的方法

假设我们有这样一个字符串：

你好#xyz你好吗？

我想把

#xyz

替换为

因此，最终输出将如下所示

您好，您好吗？

当然，我们可以在里面放很多东西

如何做到这一点？

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?"
}

函数（标记：字符串）{
const str=tag.slice（1）；//从字符串中删除
document.getElementById（“msg”）
element.innerHTML=“你好，最近怎么样？”
}

输出

据我所知，这：

“你好吗？”

是不可能的，因为angular无法通过innerHTML识别角度组件标记

可以通过其他方式实现此功能，如使用自定义指令：

遵循自定义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>`
    );
  }
}

@指令({
选择器：“[myDirective]”
})
导出类MyDirective实现OnInit{
@Input（）标记：string；
构造函数（私有el:ElementRef，私有呈现器：Renderer2）{}
恩戈尼尼特（）{
this.renderer.setProperty(
这个国家元素，
“innerHTML”，
`你的标签在这里-->${this.tag}`
);
}
}

---

您可以在组件模板中使用它作为：

来呈现预期的标记。

如果有多个#标记怎么办？