将标签值从 HTML 传递到 TS答案

【问题标题】：Passing label value from HTML to TS将标签值从 HTML 传递到 TS
【发布时间】：2021-12-23 22:30:46
【问题描述】：

我有一个类似这样的代码：

<sh-toggle label='ABCD' id = 'ABCD'> </sh-toggle>

我想提取 TS 文件中 label 的值。请告诉我怎么做？如果我正在尝试 document.getElementByID('ABCD')，那么我将获得整个切换组件并且无法从那里过滤标签。

请注意 sh-toggle 是自定义标签。

【问题讨论】：

标签： html angular typescript filter label

【解决方案1】：

您可以使用viewchild 查询来获取子组件。

为要查询的组件/元素创建一个模板引用变量(#el)。

<sh-toggle label='ABCD' id='ABCD' #el></sh-toggle>

使用viewchild 查询获取子组件。它查找与选择器匹配的第一个元素。

@ViewChild('el', { read: ElementRef }) el: ElementRef;

ngAfterViewInit(): void {
   console.log('label', this.el.nativeElement.getAttribute('label'));
}

【讨论】：

【解决方案2】：

如果 sh-toggle 是您自己的指令（例如：ToggleDirective），那么您可以通过 @ViewChild 访问它的属性：

考虑到您在 ToggleDirective 中有一个标签 @Input
添加@ViewChild(ToggleDirective) 切换：ToggleDirective；
然后只需从 .ts 的任何位置切换.label

这是一种访问组件属性的角度方式。

document.getElementByID 绝不是有角度的方式。

Stackblitz example

【讨论】：

【解决方案3】：

我不确定您是否在 UI 端使用任何框架/库。看看这段代码够不够

document.getElementById("ABCD").attributes.getNamedItem("label").value

【讨论】：