时间戳

首页 > 解决方案 > Angular：在ts文件中生成超链接

angular - Angular：在ts文件中生成超链接

问题描述

我需要在使用 for 循环的函数侧的组件（在 .ts 文件中）生成超链接。我知道我可以通过在模板中使用 *ngFor 循环来做到这一点。例如 -

    <div *ngFor="let rec of item.Records; let k = index;">
    <a [routerLink]="['<url>']"
        [queryParams]="{ id: <itemID>, code: <code>} 
    </a>
   </div>

我怎样才能在函数内的 .ts 文件中做同样的事情。

先感谢您。

标签： angulartypescript

解决方案

如果要在组件级别使用超链接，则可以使用 innerHTML 属性。例子：

模板.html

<span [innerHTML]='messageText'></span>

组件.ts

messageText = "<a href='http://www.google.com'>Open Google</a>"

预期的消息显示：

打开谷歌。

实际消息显示：

打开谷歌

如果您想继续使用模板，那么这可以帮助您。

组件.ts

export class AppComponent  {
  
  data=[
    {
      name:"Facebook",
      url:"www.Facebook.org"
    },
    {
      name:"Google",
      url:"www.google.com"
    },
    {
      name:"Twitter",
      url:"www.Twitter.com"
    }
  ]
  }

模板.html

<div *ngFor = "let item of data"> 
  <a [attr.href]="item.url">
   {{item.name}}
  </a>
</div>

推荐阅读