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格式标签

如何识别段落中的链接并使之可单击Angular 2

1 个答案: