html - 如何通过数据绑定(bind)设置组件主机名

标签 html angular typescript

我的组件有一个名为 componentId 的变量,它被定义为组件的输入:

@Input() public componentId: string;

我希望在构建 HTML 时解释此变量,以便将其分配给属性name。像这样的事情:

<customTag name="{{componentId}}"/>

问题是 customTag 没有属性 name,所以当我尝试这样做时,我得到了异常:

Can't bind to 'name' since it isn't a known property of 'customTag'.

但是,如果我这样做:

<customTag name="somename"/>

...在渲染的 HTML 中,我可以正确地看到用“somename”填充的属性名称。

我需要的只是使用这个变量(componentId)的值作为customTagname,而不需要实际尝试访问组件 customTag 的属性 name (该代码我无法控制,因为它来自库)。

如何读取 componentId 的值并将其动态分配给静态属性 name

最佳答案

您可以使用attribute binding :

<customTag [attr.name]="componentId"></customTag>

关于html - 如何通过数据绑定(bind)设置组件主机名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49696914/

相关文章:

javascript - localStorage 的 'storage' 事件中的未定义属性

javascript - [Bootstrap]- Dropdown 与 Collapse 一起使用时的奇怪行为

typescript - 从 Angular 2 typescript 编辑 SASS 变量

html - 以 Angular 2 访问数据属性值

并非所有属性都匹配时不显示 typescript 类型检查错误

angularjs - TypeScript 构造函数中的私有(private)变量声明以引发 DI

javascript - 如何在客户端/客户端计算机上主动运行 PHP 脚本?

html - 如何使用 CSS 在 YouTube 上隐藏 "What to Watch"?

javascript - dispatchEvent 导致错误 failed to execute 'dispatchEvent' on 'EventTarget' : parameter 1 is not of type 'Event'

node.js - 部署 Angular 2 项目时,Azure 持续部署在 Github 上失败