Angular 指令从元素中删除原始属性

Posted 2023-02-22

【中文标题】Angular 指令从元素中删除原始属性

【英文标题】：Angular directive removes original attribute from element

【发布时间】：2017-11-01 13:40:58

【问题描述】：

当在某些元素上添加指令时（例如img），并且如果该指令具有来自它的某些属性为@Input()（例如src），则原始属性将更改为ng-reflect-*（例如@987654326 @) 并且永远不会显示图像，因为没有 src 属性。

只有在必须评估 src 时才会发生这种情况，不会发生在固定网址上！

这是预期的行为还是错误？有可能让它工作吗？ （目前我正在通过使用src 和source 并仅将source 作为指令的输入来解决它。）

可以在以下 plnkr 上看到示例（应该显示两张图片，但只有一张）：https://plnkr.co/edit/5AjZPeyEfd6IOqxQp3kq?p=preview

【参考方案1】：

我认为这是预期的行为。

可能的解决方法如下

@HostBinding() @Input() src: string;

Plunker Example

【讨论】：

你是对的，这确实有效，而且使用constructor(@Attribute('src') src: string) 可能还有更好的方法（此处提供github.com/angular/angular/issues/17138）

还有一个问题，为什么它只在评估值时才消耗src（即src="imgUrl"）而不是在硬编码值时（即src="some-pic.com/link123" )?