使用 Angular 4 从文本自动生成 href 链接

Question

TL;DR

如何从 json 中收到的某些文本呈现指向浏览器的超链接？

场景

我正在使用 Angular 4 从 json 文件中的对象调用数组，这是一个非常基本的博客。问题是，在我正在咨询的 json 中，有一个名为"body"的字段，其中加载了帖子的正文，我需要做的是在该文本中的每个链接加载到调用它的div 中时识别该文本中的每个链接。

Json 看起来像这样：

{"posts": [
{
  "id": 1,
  "date":"November 10th, 2017",
  "time":"3:50PM",
  "body": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
  penatibus 
  et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
  felis",
  "img": null
},
{
    "id": 2,
    "date":"November 10th, 2017",
    "time":"3:50PM",
    "body": "Loremsa. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus. Donec quam felis",
    "img": null
  
  },
{
    "id": 3,
    "date":"November 10th, 2017",
    "time":"3:50PM",
    "body": "http://www.webesite.com  Lorem  elit. Aenean commodo ligula 
    eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. Donec quam felis",
    "img": "https://scontent.fcnq1-1.fna.fbcdn.net/v/t1.0-9/22491481_680661882130471_2500422036645997028_n.jpg?oh=2e5001e92d201e446e3120204869a434&oe=5A68A19D"
  }
]
}

我使用 *ngFor 从div 调用它，就像这样

<div class="row mt-3">
  <div class="col-12 card-inf bg-inf-blue text-white mb-3 px-0" *ngFor="let post of posts">
    <div class="card-header-inf">
      <div class="row">
        <div class="col-6">
          <h6>Informatorio</h6>  
        </div>
        <div class="col-6 text-right"><small>{{post.date}} - {{post.time}}
    </small></div>
      </div>
    </div>
    <div class="card-body-inf bg-inf-blue pt-0">
      <div class="row">
        <div class="col-12">{{post.body}}</div>
        <div class="col-12  mt-3 img-responsive" *ngIf = "post.img != null">
          <img src="{{post.img}}" alt="" class="img-fluid img-thumbnail ">
        </div>
      </div>
    </div>
  </div>
</div>

如您所见，在 json 的第三个数组中"body"字段的开头有一个纯文本链接，我需要的是将该链接识别为视图中的链接。

Answer 1

我已经为您创建了一个工作堆栈闪电战。这里的方法是利用innerHtml并将post.body传递给函数以构建格式化的html。

组件.html

<div *ngFor="let post of posts">
  <div [innerHTML]="parseBody(post.body)">
  </div>
</div>

组件.ts

parseBody(body:string) {
  // TODO you will need to improve this regex.
  return body.replace(/(http.*?s)/, "<a href="$1">$1</a>")
}