时间戳

首页 > 解决方案 > 通过 attr 进行 Angular 属性绑定。使用@Attribute 时产生空值

html - 通过 attr 进行 Angular 属性绑定。使用@Attribute 时产生空值

问题描述

如果我在模板中使用这样的角度组件：

<my-cmp selectable />

我的组件在其构造函数中询问以下内容：

constructor(@Attribute("selectable") selectable: string){};

然后selectable将是一个空字符串，正如预期的那样，但是当它像这样使用时：

<my-cmp [attr.selectable]="true" />

这会将属性正确放置到 DOM 中的我的标签中，并产生以下结果：

<my-cmp selectable="true" />

但在这种情况下，selectable将始终有一个null值，无论它是 onconstruct还是 onngOnInit以及它的给定值（例如false，“”或其他任何东西也会导致null）。

这里的问题是：为什么？更重要的是：如何以最好的方式在角度使用布尔属性？

注意：在这种情况下，我明确不想使用属性绑定，给定的“输入”应该是静态的。

标签： htmlangularbindingattributes

解决方案

您可以在此处了解有关 @Attribute 装饰器的内部结构：

Angular 不会在运行时读取属性值，只在编译时读取，否则我们会受到性能影响。

使用<my-cmp [attr.selectable]="true" />语法，您正在创建一个绑定。但属性值将在第一个变化检测周期后设置。所以在编译时你不会设置属性，所以你会得到一个null值。

推荐阅读