时间戳

首页 > 解决方案 > Angular：多个组件中的相同 id 属性

angular - Angular：多个组件中的相同 id 属性

问题描述

我刚刚发现，如果我们id对多个组件中的 HTML 元素使用相同的属性，并且如果这些组件在视图中一起呈现，则会id在DOM.

例如，考虑以下场景：

//hello.component.html
<p id="greet">Hello</p>

//welcome.component.html
 <p id="greet">welcome</p>

//app.component.html
<app-hello></app-hello>
<app-welcome></app-welcome>

考虑到app-hello，分别app-welcome作为hello和welcome组件的选择器，当它们在app组件中渲染时，它们id内部的属性将被重复，具有相同的值。因此，这将打破 的W3C标准，该标准id规定id属性值在整个DOM.

由于据说组件是独立的、封装的 UI 片段，我认为id在实现组件时验证所有组件中元素的属性是否唯一是不可取的。

那么，在这种情况下应该采取什么方法来维护唯一id属性呢？这些片段基于 Angular，但我认为这个问题将适用于所有基于组件的框架，如 React、Vue 等。

标签： angular

解决方案

在我们的应用程序中，我们不会为元素设置 Id 属性，以防我们想要设置主题，我们使用 css 类，如果我们想要获取元素的引用，我们使用模板引用来获取该元素或其他角度查询模板中的一个元素。

 <p #greet>Hello</p>

零件

@ViewChild('greet' , {static:true}) greetElemnt:ElementRef;

ngOnInit(){

console.log(this.greetElemnt.nativeElement)
}

推荐阅读