Angular2 将纯文本转换为 url( anchor 链接)的方法

Question

有时我有一个组件可以接收这样的文本:

text www.website.com

但如果它是一个链接，我想把它转换成一个 url。像这样。

text www.website.com

我读了这个SO answer这建议使用第三方库，例如 anchorme .有没有办法用 angular2 的方式来做？

Answer 1

使用简单的正则表达式修改 HTML 内容有很多问题。

这是一种使用 linkifyjs 的方法模块，你需要 npm install。请注意，输入被视为纯文本，而输出是 HTML 文本。

import { Pipe, PipeTransform } from '@angular/core';
import linkifyStr from 'linkifyjs/string';

@Pipe({name: 'linkify'})
export class LinkifyPipe implements PipeTransform {
  transform(str: string): string {
    return str ? linkifyStr(str, {target: '_system'}) : str;
  }
}

注意:如果您需要指定 target 属性，请添加例如。 {target: '_system'} 作为 linkifyStr 的第二个参数。