我是Angular 2中DOM操作的新手。我试图根据元素的属性值修改兄弟元素。
e.g。如果输入包含必需属性,则在标签上添加星号(星号)。
我有一个可以访问属性的指令,&输入字段的表单控件。现在我想从这个指令中修改兄弟标签。
我知道nativeElement& Renderer2基础知识,但无法找到正确的访问方式。修改兄弟姐妹。
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" required validate>
</div>
在我的验证指令中,我想检查输入中是否有必需的属性,&amp;如果是,我想在兄弟元素上添加一个类,即标签。
我可以使用ElementRef inside指令访问input元素,但是如何访问&amp;修改标签或任何其他相邻元素,即子,父,兄弟。
任何有关此类基本操作的参考文档都将是一个很大的帮助。
答案 0 :(得分:0)
关于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
我也很抱歉,我没有找到另一种方法来实现这一目标&#34; angular&#34;方式!
答案 1 :(得分:0)
了解指令中的 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';
}
}
您也可以在 ngAfterViewInit 钩子中使用 document.querySelector,但最好使用 elementref 来处理每个指令实例。