如何在html元素属性中使用Angular 2外推？ [英] How to use Angular 2 extrapolation in html element attributes?

问题描述

我想将一些数据绑定到非自定义html元素属性。但是，属性中的{{}}不是外推的。
我已将其他相关帖子视为 Angularjs templateUrl无法绑定ng-repeat内的属性，这是自定义指令的角度1解决方案。

I want to bind some data to non-custom html element attributes. However, the {{ }} in attributes is not extrapolated. I've looked at other related posts as "Angularjs templateUrl fails to bind attributes inside ng-repeat", which is a angular 1 solution for custom directives.

例如，我有：

size = 500;

我希望以下SVG元素正常工作：

I want the following SVG element to work properly:

<svg xmlns="http://www.w3.org/2000/svg/" width="{{size}}" height="{{size}}">
<rect width="{{size}}" height="{{size}}" fill="#DCB35C"/>
</svg>

我应该如何在Angular 2中执行此操作？

How should I do this in Angular 2?

推荐答案

简短回答

当HTML属性与DOM属性之间没有1：1映射时，必须使用属性绑定语法否则Angular 2将报告模板解析错误。

Short answer

When there isn't an 1:1 mapping between an HTML attribute and a DOM property one must use the attribute binding syntax otherwise Angular 2 will report a "template parse error".

示例：

• [attr.my- custom-attribute] =myComponentValue


• [attr.colspan] =1 + 1

• [attr.my-custom-attribute]="myComponentValue"
• [attr.colspan]="1 + 1"

在您的情况下，SVG元素具有宽度和高度DOM属性，但它们不是您所期望的。他们是 SVGAnimatedLength 对象。试图以旧的方式设置他们的价值将不会做任何事情。这就是为什么您的模板不能按预期工作并且不报告错误的原因。切换到属性绑定语法将解决此问题： [attr.width] =width[attr.height] =height

In your case, an SVG element has the width and height DOM properties but they aren't what you expect. They're SVGAnimatedLength objects. Trying to set their value the old way won't do anything. That's why your template doesn't work as you expect and doesn't report an error. Switching to attribute binding syntax would fix this behaviour: [attr.width]="width" [attr.height]="height"

在Angular 1和Angular 2中属性绑定的工作方式有很大的概念差异。

There's a big conceptual difference between how attribute bindings work in Angular 1 and Angular 2.

• < div a -custom-attribute =我是自定义{{'属性'}}>文字内容< / div>


• < div ng-attr-a-custom-attribute =我是自定义{{'属性'}}>文字内容< / div> - 此语法允许您绑定到其他方式急切处理的属性浏览器（例如SVG元素的circle [cx]属性，IMG元素的src属性等）

• <div a-custom-attribute="I am a custom {{ 'attribute' }}">Text Content</div>
• <div ng-attr-a-custom-attribute="I am a custom {{ 'attribute' }}">Text Content</div> - this syntax allows you to bind to attributes that would otherwise be eagerly processed by browsers (e.g. an SVG element's circle[cx] attributes, the src attribute of a IMG element, etc)

Angular 2介绍，正如他们所说， 一个新的心理模型 ：而不是绑定到它绑定的HTML属性DOM属性。了解之间的区别HTML属性和DOM属性对于掌握Angular 2绑定的工作原理至关重要。

Angular 2 introduced, as they put it, a new mental model: instead of binding to HTML attributes it binds to DOM properties. Understanding the distinction between an HTML attribute and a DOM property is crucial to getting a grasp of how Angular 2 binding works.

绑定到DOM属性可能如下所示：

Binding to a DOM property may looks like this:

• < img [src] =heroImageUrl>


• < img bind-sr​​c =heroImageUrl>


• < ; img src ={{heroImageUrl}}> - 这可能看起来有点令人困惑，特别是如果有人有AngularJS 1背景，但Angular 2会在渲染之前将这些插值转换为相应的属性绑定视图（ source ）。 请务必注意，因为标记在评论部分指出，在评估插值后，然后将其结果转换为字符串（ source ）。这意味着此语法仅​​限于分配字符串值。

• <img [src]="heroImageUrl">
• <img bind-src="heroImageUrl">
• <img src="{{ heroImageUrl }}"> - this may look a bit confusing, especially if someone has an AngularJS 1 background, but Angular 2 translates these interpolations into the corresponding property bindings before rendering the view (source). It's important to have in mind that, as Mark pointed out in the comment section, after an interpolation has been evaluated, its result is then converted to a string (source). This implies that this syntax is limited to only assigning string values.

请注意，如果名称与DOM属性不匹配，则Angular 2报告未知的本机属性错误：

Note that if the name fails to match a DOM property, Angular 2 reports an "unknown native property" error:

// Template parse errors:
// Can't bind to 'colspan' since it isn't a known native property
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

// Template parse errors:
// Can't bind to 'madeUpProperty' since it isn't a known native property
<div [madeUpProperty]="My custom {{ 'madeUpProperty' }}"></div>

这意味着必须使用属性绑定语法，当没有要绑定的DOM属性时。

This means that one must use the attribute binding syntax when there is no DOM property to bind to.

最后，我认为，作为一个好的经验法则，我应该始终使用属性绑定的语法（例如 [src] =heroImageUrl ）支持插值（例如 src ={{heroImageUrl}}），只要他想修改元素的DOM属性，因为后者仅限于传递字符串值。另一个原因是，如果有人拥有AngularJS 1背景，这应该减少设置属性和DOM属性之间的混淆。

Finally, I believe that as a good rule of thumb one should always use the property binding's syntax (e.g. [src]="heroImageUrl") in favor of interpolation (e.g. src="{{heroImageUrl}}") whenever he wants to modify the element's DOM property since the latter is limited to only passing string values. Another reason is that if someone has an AngularJS 1 background, this should reduce the confusion between setting an attribute and a DOM property.

这篇关于如何在html元素属性中使用Angular 2外推？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！