Javascript 如何在html元素属性中使用Angular 2推断？

我想将一些数据绑定到非自定义html元素属性。但是，{{}}in属性不是外推的。 我在其他相关的帖子中看到了“”，这是一个面向定制指令的角度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中应该如何执行此操作？

您应该使用属性绑定来绑定

宽度

和

高度

，在绑定之前使用

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>

---

根据请求，通过具有一些常量字符串值来追加大小值，您只需将其置于

属性上，就像
[attr.width]=“size+'5'”




简短回答
当HTML属性和DOM属性之间没有1:1映射时，必须使用2，否则将报告“模板解析错误”

示例：


[attr.my custom属性]=“myComponentValue”
[attr.colspan]=“1+1”

在您的例子中，SVG元素具有宽度和高度DOM属性，但它们不是您所期望的。它们是物体。试图用旧的方式来设定他们的价值是没有用的。这就是为什么您的模板不能像您期望的那样工作，并且没有报告错误。切换到属性绑定语法将修复此行为：
[attr.width]=“width”[attr.height]=“height”

深入解释
在Angular 1和Angular 2中属性绑定的工作方式在概念上有很大区别

在Angular 1中，设置自定义属性如下所示：

文本内容
文本内容
-允许您绑定到浏览器迫切需要处理的属性（例如SVG元素的圆圈[cx]属性、IMG元素的src属性等）

在Angular 2中，有一个不同的故事：
正如他们所说，Angular 2引入了：而不是绑定到HTML属性，它绑定到DOM属性。理解是掌握Angular 2绑定如何工作的关键

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




-这看起来可能有点混乱，特别是如果某人有AngularJS 1背景，但Angular 2会在渲染视图之前将这些插值转换为相应的属性绑定（）重要的是要记住，如注释部分所指出的，在计算插值后，其结果将转换为字符串。这意味着此语法仅限于分配字符串值


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

//模板分析错误：
//无法绑定到“colspan”，因为它不是已知的本机属性
三四
//模板分析错误：
//无法绑定到“madeUpProperty”，因为它不是已知的本机属性

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

最后，我认为，作为一个好的经验法则，无论何时，只要想修改元素的DOM属性，就应该始终使用（例如
[src]=“HeroMageURL”
）来支持插值（例如
src=“{{HeroMageURL}}”
）。另一个原因是，如果某人有AngularJS 1背景，这应该可以减少设置属性和DOM属性之间的混淆。
thx，如果我想设置width=“{size}}}1”，在大小字符串后面加上1，该怎么办？@lys1030查看更新的答案。。这也有一个例子。。如果您想将宽度增加1，那么请执行
[attr.width]=“size+1”
我的意思不是“添加1”，而是“附加1”。例如，如果size=10，我想附加一个5，它给出105。然后将它的大小保持为字符串，而不是numberThanks！你和Cosmin都给出了很好的答案。我在犹豫接受哪一个。我会等几天看投票结果再做决定。
.px
实际上不是必需的。
是一个属性，它取一个值，然后在内部应用
宽度
&
高度
到
svg
&
rect
元素上。看一看，我只是通知大家，在绘制svg时，不需要使用
px
。请注意，我没有说它是必需的，但也不能这样使用。在
x=“{{template\u expression}}”
和
[x]=“template\u expression”
之间有细微的区别——它们不一样。使用
{{}
将
模板_表达式的结果转换为字符串，然后将其分配给属性
x
。对于
[]
，没有字符串转换步骤。所以我不同意“没有技术上的理由选择一种形式而不是另一种形式”的说法。如果我们想为属性
x
分配字符串以外的内容，我们不能使用
{{}}
，我们必须使用
[]
@MarkRajcok，感谢您指出这一点。我已经编辑了我的答案。
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);

<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>

<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>

// 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>