主页 / 问题 / 954942
Accepted
MiT
Asked:2020-03-11 16:54:43 +0800 CST2020-03-11 16:54:43 +0800 CST

使用一堆 JavaScript 和 Angular 6 时的名称冲突

  • 772

我有自己写的js库，添加到angular.json中，添加好了。我在 html 文件中使用它：

<div class="video-cover" id="videoPlayer" data-title="{{title.name}} ({{title.year}})"></div>

这就是问题开始的地方，在编译时，由于名称冲突， data-title将其名称更改为title 。因此，JS 停止执行其功能......将名称data-title更改为data-name在编译期间显示错误：

ERROR in : Can't bind to 'data-name' since it isn't a known property of 'div'.

<div ... [ERROR ->]data-name="{{title.name}} ({{title.year}})"></div>

如何解决问题？

angular

1 个回答

  1. Best Answer

    如果你想设置一个属性，那么修饰符用于 this attr。

    引擎盖下的编译器有一个格式tagName^[constructor]|...attributes为（例如input^[HTMLElement]|accept,align,alt,autocapitalize,autocomplete......）的大型方案，在解析模板后，链接器通过该方案运行 AST 并检查您是否使用未知属性。因此，当使用众所周知的属性时，例如disabled，您不需要编写attr.disabled，但disabled="{{ expression }}"已经足够了。

    在您的情况下，链接器不了解data-title某些指令的属性或输入属性，您需要显式指定修饰符attr：

    attr.data-title="{{ title.name }} ({{ title.year }})"

    或者：

    [attr.data-title]="title.name + '(' + title.year + ')'"

    我认为第二个选项不太方便且不可读，因此第一个选项非常适合。

    • 1

相关问题