编译时，“数据目标"属性变为“目标" [英] 'data-target' property becomes 'target' when compiling

问题描述

我想使用锚来为每个实例多次使用角度指令来调用模态.这是锚点:

I want to use an anchor for calling a modal from a multiple times used angular-directive for each instance. This is the anchor:

<li>
   <a role="button" 
      data-toggle="modal" 
      data-target="#editModal{{tweet.id}}"
    >Edit</a>
</li>

但是当我使用 {{}} 时，已编译的html代码仅显示

But when I use the {{ }}, the compiled html code shows only a

target="#editModal24"

因此该呼叫无法正常工作.

and therefor the call doesn't work.

当我在浏览器中手动更改为 data-target 属性时，一切正常.

When I manually change to the data-target property in the browser, everything works.

有什么想法可以防止这种情况吗?

Any ideas how to prevent that?

最诚挚的问候

推荐答案

角度归一化属性名称

private _normalizeAttributeName(attrName: string): string {
  return /^data-/i.test(attrName) ? attrName.substring(5) : attrName;
}

注意:即使< div data- * ngIf ="3"> Hello</div> 也可以正常工作.

Note: even <div data-*ngIf="3">Hello</div> will work without problem.

当您在属性内使用插值时，它将被视为属性绑定

And as you use interpolation inside attribute then it will be treated as property binding

因此，角度将 target 属性设置为 a 元素.

So angular sets target property to a element.

HTMLAnchorElement.target

是一个反映目标HTML属性的DOMString，指示在何处显示链接的资源.

Is a DOMString that reflects the target HTML attribute, indicating where to display the linked resource.

这就是为什么在将 target 属性设置为锚元素之后可以看到 target 属性的原因.

That's why you can see the target attribute after setting target property to anchor element.

如果要保留 data-target 属性，请使用属性绑定，例如:

If you want to keep data-target attribute then use attribute binding like:

选项1

attr.data-target="#editModal{{tweet.id}}"

选项2

[attr.data-target]="'#editModal' + tweet.id"

这篇关于编译时，“数据目标"属性变为“目标"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！