Question

In my component I subscribe some basic data:

ngOnInit() {
    this.data.getBasics().subscribe(
      data => {
        this.basics = data
      }
    )
  }

I use them in html like this:

<h1>{{ basics.surname }}</h1>

and it works perfectly fine. A few of basics are the links. Assume basics.mypage to be " http://mypage.com”中使用角度变量。我想将其用作HTML文档中的href。类似这样的东西：

import plotly.plotly as py
data = dict(
type='sankey',
node = dict(
  pad = 15,
  thickness = 20,
  line = dict(
    color = "black",
    width = 0.5
  ),
  label = ["A1", "A2", "B1", "B2", "C1", "C2"],

  color = ["blue", "blue", "blue", "blue", 
  "white", "white"]),#attempt to make it less visible

link = dict(
  source = [0,1,0,2,3,3],
  target = [2,3,3,4,4,5],
  value = [8,4,2,8,4,2],
  # attempt to add labels
  label= [8,4,2,8,4,2]))

layout =  dict(
title = "Basic Sankey Diagram",
font = dict(
  size = 10
 )
 )

fig = dict(data=[data], layout=layout)
py.iplot(fig, validate=False)

但是这样可以将我发送到

http://localhost:4200/%7Bbasics.mypage%7D

如何在标记内使用此变量？

Answer 1

使用ng-href：

<a ng-href={{ basics.mypage }}>Go to my page</a>

或检查数据格式是否正确。

Answer 2

只需在引号中插入{{basics.mypage}}

<a href="{{basics.mypage}}">Go to my page</a>

Answer 3

还有另一种方法，那就是属性绑定。

<a [href]="variableName"></a>

or

<a [attr.href]="variableName"></a>

Answer 4

根据您应用的协议，始终在绝对外部链接之前添加协议或// // http：//或https：//的快捷方式。

<div class="inline-icon-text">
<small class="text-muted d-md-none mr-3">Link</small>
 <a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
<i class="material-icons">open_in_new</i>
 </a>
</div>

浏览器默认情况下会将URL视为相对网址，以促进应用内导航。

请注意，此行为并非特定于Angular；其他框架和普通站点的行为完全相同。这也是这样做的好方法。

Answer 5

改用它。

<a ng-href={{basics.mypage}}>Go to my page</a>

这是我可以从此处的API角度收集的信息：Angular ngHref

如何在<a> tag

5 个答案: