javascript - 如何识别段落中的链接并使其可点击 Angular 2

Question

我有一段包含链接的字符串。这些链接必须是可点击的并将用户重定向到特定页面。我已经编写了自定义管道，但我错过了这里的要点。

尝试过:

import {
  Pipe,
  PipeTransform
} from '@angular/core';
import {
  DecimalPipe
} from '@angular/common';

@Pipe({
  name: 'urlify'
})

export class UrlifyPipe implements PipeTransform {

  transform(text: any): any {
    var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
      return '<a href="' + url + '">' + url + '</a>';
    });
  }
}

还有我的字符串:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo www.sentinal.com. Aenean massa. Cum sociis http://sentinal.com et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 

结果:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo www.sentinal.com. Aenean massa. Cum sociis <a href="http://sentinal.com">http://sentinal.com</a> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

正如我们所见，www.sentinal.com 和 http://sentinal.com并没有真正转换。添加了 h 标签，但这不是我想要的。任何想法的人如何实现它。我无法使用 Urlify 库，我想用自己的代码编写它。提前致谢

Answer 1

你应该这样做

<div [innerHtml]="my_model | urlify "></div>

我们必须使用innerHtml，以便它能够呈现html格式标签