如何在 html 元素属性中使用 Angular 2 外推法

How to use Angular 2 extrapolation in html element attributes?

本文关键字：Angular html 元素 属性      更新时间：2023-09-26

我想将一些数据绑定到非自定义的html元素属性。但是，属性中的 {{ }} 不是外推的。我查看了其他相关帖子，例如"Angularjs templateUrl无法在ng-repeat中绑定属性"，这是自定义指令的角度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 中执行此操作？

简答

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

例子：

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

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

深入解释

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

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

  • <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> - 此语法允许您绑定到浏览器会急切处理的属性（例如，SVG 元素的 circle[cx] 属性、IMG 元素的 src 属性等）

在 Angular 2 中，有一个不同的故事：

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

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

  • <img [src]="heroImageUrl">
  • <img bind-src="heroImageUrl">
  • <img src="{{ heroImageUrl }}"> - 这可能看起来有点令人困惑，特别是如果有人有 AngularJS 1 背景，但 Angular 2 在渲染视图（源）之前将这些插值转换为相应的属性绑定。重要的是要记住，正如 Mark 在注释部分指出的那样，在评估插值后，其结果将转换为字符串（源）。这意味着此语法仅限于分配字符串值。

请注意，如果名称与 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 属性时，必须使用属性绑定语法。

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

<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>
你应该

使用属性绑定来绑定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>

更新的普伦克尔

相关文章：