如何识别段落中的链接并使其可点击 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并没有真正转换。ah 标签已添加，但这不是我想要的。任何想法的人如何实现它。我无法使用 Urlify 库，我想用自己的代码编写它。提前致谢

Answer 1

你应该这样做

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

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