如何将 URL 单元格文本转换为小 link 时按下它打开为 URL？

Question

在 angular 7 上的 URL 浏览器中打开时，如何将单元格文本转换为 link？

我有 offilne 列的单元格文本URL text inside cell display URL as text

我需要转换文本或用 link 替换文本，然后当按下它时直接重定向到 URL。

component.html

<tbody>
<ng-container *ngFor="let repcon of ReportControl">
                  <ng-container *ngFor="let repdata of ReportData">
                    <tr *ngFor="let rep of reportdetailslist">

                      <td *ngFor="let coln of headerCols">


                        <span>


                          {{rep[coln]}}
                        </span>
                        <div *ngIf="coln==repcon.fieldName">
                          <div *ngIf="repcon.columnType==1">
                            display text as link url
                          </div>

                        </div>
                        </td>
                    </tr>
                  </ng-container>
                </ng-container>
</tbody>

样本数据

RevisionId   offilneURL
122345       https://source.z2data.com/2019/1/13/8/55/47/351/662203977/21527_SPCN.PDF
             display text as link url

以上就是数据的当前状态我预计是：

RevisionId   offilneURL
    122345       URL link

点击它时的小快捷方式名称将重定向到上面的 link URL。我需要制作 URL 有两个原因：

首先，它占用太多space。

其次，我可以直接点击link，不用复制过去URL浏览器。

已更新

通过{{rep.offilneURL}}

在每个link上访问url

你能告诉我如何传递 {{rep.offilneURL}} 并以 url 的形式打开并使用短名称吗描述

Answer 1

首先js中没有press origin事件，但是可以用click事件代替，比如dom.Click =function(e){}。可以在参数e中获取url文本，然后调用window.open(url)跳转

如何将 URL 单元格文本转换为小 link 时按下它打开为 URL？

How to convert URL cell text as small link when press on it open as URL?

javascript

typescript

angular7

angular-directive

angular-components