Добавить (щелкнуть) метод ссылки в текстовом блоке в компоненте Angular - PullRequest
Новая
       130

Добавить (щелкнуть) метод ссылки в текстовом блоке в компоненте Angular

0 голосов
/ 07 августа 2020

У меня небольшая проблема. Я получаю текст с сервера с внутренним Html, который вставлен в компонент Angular. Внутри этого текста, возможно, есть ссылки. Пример текстового блока выглядит следующим образом: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Есть ли способ вставить там привязку, как это действие щелчка? 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 07 августа 2020

Если я вас правильно понял, вы визуализируете html, загруженное с сервера, с внутренним Html, в этом случае вы не можете использовать директивы Angular внутри этого шаблона. Но вы можете добавить слушателей с общим JS (document.addEventListener) после рендеринга контента. 

@Component({
  template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
  @ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;

  ngAfterViewInit() {
     const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
     links.forEach(link => 
       link.addEventListener('click', this.linkClickHandler.bind(this));
     );
  }

  linkClickHandler(event: MouseEvent) {
    ...
  }
}
0 голосов
/ 07 августа 2020

Для динамических c ссылок вы можете привязать желаемую ссылку url в своем теге a, как показано ниже 

<a [href]="some.url">Link</a>

Если some является объектом.

Для события щелчка у вас может быть что-то вроде 

method(url: string) {
  window.location.href = url;
}

, тогда вы передадите свою url строку, например (click)="method('http://domain.tld/page.html')"

...