Динамически генерировать ссылки в поле зрения в Angular

Question

У меня есть строка типа

мой красивый супер% url% URLLINK% url% без дверного проема!

и я хотел бы получить что-то подобное :

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

Как динамически генерировать элементы шаблона в коде?

Answer 1

Добро пожаловать, Боб Балконский!

Мы можем поместить эту функцию в отдельный компонент,

@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

Answer 2

Вы можете просто разделить текст на% url% и собрать части в вашем шаблоне:

ts:

//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%');
  }

html:

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

Пример StackBlitz

Answer 3

Вы можете использовать [innerHTML]: TS:

 url = `my beutifull super <a style="cursor:pointer" target="_blank" href="https://www.google.com/">URLLINK</a> with no doorway!`

HTML:

<div [innerHTML]="url"></div>

пример: https://stackblitz.com/edit/angular-8ah7dd?file=src%2Fapp%2Fapp.component.html