我想将一些数据绑定到非自定义的 html 元素属性。但是，属性中的 {{ }} 不是外推的。 我将其他相关帖子视为“Angularjs templateUrl fails to bind attributes inside ng-repeat”，这是自定义指令的 angular 1 解决方案。
例如，我有：
size = 500;
我希望以下 SVG 元素正常工作：
<svg xmlns="http://www.w3.org/2000/svg/" width="{{size}}" height="{{size}}">
<rect width="{{size}}" height="{{size}}" fill="#DCB35C"/>
</svg>
我应该如何在 Angular 2 中做到这一点？
【问题讨论】：
标签： javascript angularjs angular
当 HTML 属性和 DOM 属性之间没有 1:1 映射时，必须使用 attribute binding syntax 否则 Angular 2 将报告“模板解析错误”。
例子：
[attr.my-custom-attribute]="myComponentValue"[attr.colspan]="1 + 1"在您的情况下，SVG 元素具有宽度和高度 DOM 属性，但它们不是您所期望的。它们是SVGAnimatedLength 对象。试图以旧方式设置它们的值不会做任何事情。这就是为什么您的模板不能按预期工作并且不报告错误的原因。切换到属性绑定语法将修复此行为：[attr.width]="width" [attr.height]="height"
属性绑定在 Angular 1 和 Angular 2 中的工作方式存在很大的概念差异。
<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 允许您绑定到原本会被浏览器急切处理的属性（例如 SVG 元素的 circle[cx] 属性、IMG 元素的 src 属性等）Angular 2 引入了，正如他们所说的，a new mental model：不是绑定到 HTML 属性，而是绑定到 DOM 属性。了解 the distinction between an HTML attribute and a DOM property 对于了解 Angular 2 绑定的工作原理至关重要。
绑定到 DOM 属性可能如下所示：
<img [src]="heroImageUrl"><img bind-src="heroImageUrl"><img src="{{ heroImageUrl }}"> - 这可能看起来有点混乱，特别是如果某人有 AngularJS 1 背景，但 Angular 2 在渲染视图之前将这些插值转换为相应的属性绑定 (source)。 重要的是要记住，正如Mark 在评论部分指出的那样，在对插值进行评估后，其结果随后会转换为字符串（@ 987654328@)。这意味着此语法仅限于分配字符串值。请注意，如果名称无法匹配 DOM 属性，Angular 2 会报告“未知原生属性”错误：
// 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 属性时，必须使用attribute binding syntax。
最后，我相信作为一个好的经验法则，当他想要修改时，应该始终使用property binding's syntax（例如[src]="heroImageUrl"）来支持插值（例如src="{{heroImageUrl}}"）元素的 DOM 属性，因为后者仅限于传递字符串值。另一个原因是，如果某人有 AngularJS 1 背景，这应该可以减少设置属性和 DOM 属性之间的混淆。
【讨论】：
x="{{template_expression}}" 和[x]="template_expression" 之间存在细微差别——它们并不相同。使用{{}} 将template_expression 的结果转换为字符串，然后将其分配给属性x。使用[]，没有字符串转换步骤。因此，我不同意 Angular 文档中声明“没有技术理由偏爱一种形式而不是另一种形式”。如果我们想为属性x分配字符串以外的东西，我们不能使用{{}}，我们必须使用[]。
<svg xmlns="http://www.w3.org/2000/svg/" [attr.width.px]="size" [attr.height.px]="size">
<rect [attr.width.px]="width" [attr.height.px]="height" fill="#DCB35C" />
</svg>
【讨论】：
.px 并不是真正需要的。这些是接受一个值的属性，然后它们在内部将 width 和 height 应用于 svg 和 rect 元素。看看this plunkr
px 在绘图时不需要svg developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
您应该使用属性绑定来绑定width 和height，方法是在绑定之前添加attr 前缀，例如[attr.*]。
标记
<svg xmlns="http://www.w3.org/2000/svg/" [attr.width]="size" [attr.height]="size">
<rect [attr.width]="width" [attr.height]="height" fill="#DCB35C" />
</svg>
类
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'demo-app',
templateUrl: 'src/app.html',
pipes: []
})
export class App {
width: number = 100;
height: number=100;
size: number=100;
constructor() { }
}
bootstrap(App);
根据要求通过具有一些常量字符串值附加大小值，您只需将其放在attribute 上，如[attr.width]="size + '5'"
<svg xmlns="http://www.w3.org/2000/svg/" [attr.width]="size" [attr.height]="size">
<rect [attr.width]="width + '5'" [attr.height]="height + '5'" fill="#DCB35C" />
</svg>
【讨论】：
[attr.width]="size+1"