将标签值从 HTML 传递到 TS

Question

我的代码是这样的：

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

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

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

Answer 1

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

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

Answer 2

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

考虑到您在 ToggleDirective 中有一个标签 @Input
添加@ViewChild(ToggleDirective) toggle:ToggleDirective;
然后只需从 .ts 的任何地方 toggle.label

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

document.getElementByID 永远不是 angular 的方式。

Stackblitz example

Answer 3

您可以使用 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'));
}

将标签值从 HTML 传递到 TS

Passing label value from HTML to TS

html

label

filter

typescript

angular