从角2指令修改兄弟DOM元素
从角2指令修改兄弟DOM元素
提问于 2017-07-07 02:52:38
我对角2中的DOM操作很陌生，我试图根据元素的属性值来修改同级元素。
例如，如果输入包含必需的属性，则在标签上添加星号(星号)符号。
我有一个指令，它可以访问属性&输入字段的表单控制。现在，我想从这个指令中修改同级标签。
我知道nativeElement和Renderer2的基本知识，但无法找到访问和修改兄弟姐妹的正确方法。
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" required validate>
</div>在我的label指令中，我想检查输入中是否有必需的属性&如果是，我想在兄弟元素(即label )上添加一个类。
我可以使用ElementRef inside指令访问输入元素，但是如何访问和修改标签或任何其他相邻元素，即子元素、父元素、兄弟元素。
任何这类基本操作的参考文件都会有很大的帮助。
回答 2
Stack Overflow用户
发布于 2018-02-22 14:40:41
关于required属性，可以将其添加到input指令选择器中，如下所示：
@Directive({
selector: 'input[required]'
})对于<label>逻辑，我将尝试在构造函数中使用JS：
constructor(elementRef:ElementRef){
let element = elementRef.nativeElement;
this.label = element.parentElement.querySelector('label[for="'+'element.id+'"]');
\\ Now you can use this.label.classList to manage its classes我也很抱歉，我没有找到另一种方式去做“角”的方式！
Stack Overflow用户
发布于 2021-01-28 12:15:31
理解指令中的ElementRef是什么很重要。放置一个console.log(this.el)。
我有一个带有动态字段的表单的示例，用户可以在输入下切换一些信息。
<div class="owner-bu-toggle">
<input .../>
<i class="fa facaret-left" owner-bu-toggle></i>
</div>
<div class="table-container d-none">
my table -> default hidden will be here
</div>这个指令看起来是这样的：
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[owner-bu-toggle]'
})
export class OwnerBuToggleDirective {
tableContainer: HTMLElement;
isVisible = false;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
this.tableContainer = this.el.nativeElement.parentElement.nextElementSibling;
}
@HostListener('click')
onClickToggle(): void {
this.isVisible = !this.isVisible;
this.tableContainer.className = this.isVisible ? 'd-block table-container' : 'd-none table-container';
this.el.nativeElement.className = this.isVisible ? 'fa fa-caret-down' : 'fa fa-caret-left';
}
}您也可以在document.querySelector钩子中使用ngAfterViewInit，但是可以更好地处理每个指令实例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44961821
复制相关文章
相似问题
腾讯云开发者
