Javascript 动态生成角度视图中的链接

我有一根像

我的超链接%url%urlink%url%没有门道

我想得到这样的东西：

my beutifull super <a (click)="urlHandler(URLLINK)">URLLINK</a> with no doorway!

my beutifull super-URLLINK没有门道！

如何在代码中动态生成模板元素？

您可以使用[innerHTML]： TS:

url=`my beutifull super没有门`

HTML:

例如：

---

您只需在%url%上拆分文本，然后在模板中组装部分：

ts:

html:

//使用数组构建文本和链接
{{linkText[0]}
欢迎鲍勃·巴尔孔斯基

我们可以将此功能放在单独的组件中

@Component({
  selector: 'app-custom-string-transformer',
  template: `{{parsed.before || ''}}<a *ngIf="parsed.url" (click)="handleUrlClick(parsed.url)">{{parsed.url}}</a>{{parsed.after || ''}}`,
  styles: [`a { color: blue; text-decoration: underline; cursor: pointer;}`]
})
export class StringTransformerComponent implements OnInit {

  @Input() str: string
  @Output() onUrlClicked: EventEmitter<string> = new EventEmitter<string>();

  parsed: ParsedString = {} as ParsedString

  ngOnInit(): void {
    this.parsed = this._parseStr(this.str)

  }

  _parseStr(str: string): ParsedString {
    const [full, before, url, after] = str.match(/(.*)%url%(.+)%url%(.*)/)
    return {before, url, after}
  }

  handleUrlClick(url: string): void {
    this.onUrlClicked.emit(url);
  }
}

@组件({
选择器：“应用程序自定义字符串转换器”，
模板：`{parsed.before | |'''}}
谢谢你的反应，我给了它演示我最好的照片不知道为什么它会被否决，似乎是一个很好的解决方案。可能代码太多了/对手头的问题解释不够？@qiAlex简而言之，可能有很多链接，所以我稍微修改了源代码（使正则表达式变懒，只输出到子组件的“before”和“url”部分），但任务已经解决，感谢
[innerHTML]
可以轻松引入安全性problems@bartosztermena如果你需要一个普通的链接，这将是一个很好的选择，但正如我所写的，你需要通过一个函数和[routerlink]也不会这样。如果
myUrl
=
%url%urlink%url%
链接周围会有不一致的空格，这是什么意思？
{{{linkText[0]}明白了，空格被删除：）@jmp如果源文本的部分顺序不同（例如，一行开头的链接）或多个链接，此示例将不起作用
<div [innerHTML]="url"></div>

//Create array to hold parts of string
linkText: string[] = [];

//Split your string on %url% delimiter to get start text, url and end text as separate strings
  ngOnInit()
  {
    let myUrl = 'my beutifull super %url%URLLINK%url% with no doorway!';
    this.linkText  = myUrl.split('%url%');
  }

//build text and link using array
<p>{{linkText[0]}}<a (click)="urlHandler(linkText[1])">{{linkText[1]}}</a>{{linkText[2]}}</p>

@Component({
  selector: 'app-custom-string-transformer',
  template: `{{parsed.before || ''}}<a *ngIf="parsed.url" (click)="handleUrlClick(parsed.url)">{{parsed.url}}</a>{{parsed.after || ''}}`,
  styles: [`a { color: blue; text-decoration: underline; cursor: pointer;}`]
})
export class StringTransformerComponent implements OnInit {

  @Input() str: string
  @Output() onUrlClicked: EventEmitter<string> = new EventEmitter<string>();

  parsed: ParsedString = {} as ParsedString

  ngOnInit(): void {
    this.parsed = this._parseStr(this.str)

  }

  _parseStr(str: string): ParsedString {
    const [full, before, url, after] = str.match(/(.*)%url%(.+)%url%(.*)/)
    return {before, url, after}
  }

  handleUrlClick(url: string): void {
    this.onUrlClicked.emit(url);
  }
}