时间戳

首页 > 解决方案 > 在 Angular 中动态生成视图中的链接

javascript - 在 Angular 中动态生成视图中的链接

问题描述

我有一个字符串

我美丽的超级 %url%URLLINK%url% 没有门口！

我想得到这样的东西：

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

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

标签： javascriptangulartypescript

解决方案

欢迎鲍勃·巴尔康斯基！

我们可以把这个功能放到一个单独的组件中，

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

演示：https ://stackblitz.com/edit/angular-nakjdb?file=src%2Fapp%2Fstring-transformer.component.ts

推荐阅读