从Angular 2指令修改同级DOM元素
我不熟悉Angular 2中的DOM操作。我试图根据元素的属性值修改同级元素 e、 g.若输入包含所需属性,则在标签上添加星号(星形)符号 我有一个指令,它可以访问输入字段上的属性和表单控件。现在我想在这个指令中修改同级标签 我了解nativeElement和Renderer2的基本知识,但无法找到访问和修改同级的正确方法从Angular 2指令修改同级DOM元素,angular,angular2-forms,angular2-directives,Angular,Angular2 Forms,Angular2 Directives,我不熟悉Angular 2中的DOM操作。我试图根据元素的属性值修改同级元素 e、 g.若输入包含所需属性,则在标签上添加星号(星形)符号 我有一个指令,它可以访问输入字段上的属性和表单控件。现在我想在这个指令中修改同级标签 我了解nativeElement和Renderer2的基本知识,但无法找到访问和修改同级的正确方法 <div class="form-group"> <label for="email">Email address:</label>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" required validate>
</div>
电邮地址:
在我的验证指令中,我想检查输入中是否有必需的属性,如果有,我想在同级元素上添加一个类,即标签
我可以使用ElementRef INDER指令访问输入元素,但如何访问和修改标签或任何其他相邻元素,即子元素、父元素、同级元素
有关此类基本操作的任何参考文档都会有很大帮助。关于
必需属性,您可以将其添加到输入
指令选择器中,如下所示:
@Directive({
selector: 'input[required]'
})
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';
}
}
对于
逻辑,我将尝试在构造函数中使用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
我也很抱歉,我没有找到另一种方法来做到这一点“角度”的方式 关于required
属性,您可以将其添加到输入
指令选择器中,如下所示:
@Directive({
selector: 'input[required]'
})
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';
}
}
对于
逻辑,我将尝试在构造函数中使用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
我也很抱歉,我没有找到另一种方法来做到这一点“角度”的方式 了解指令中的元素是什么很重要。放置一个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>
您也可以在ngAfterViewInit钩子中使用document.querySelector,但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>
您也可以在ngAfterViewInit钩子中使用document.querySelector,但使用elementref处理指令的每个实例更好。您可以使用@ViewChild
和@ContentChild
绑定,在模板中使用\templateName
查找elementref
。如果你分享一些有助于给出正式答案的示例代码,请更新问题。我知道使用ElementRef访问元素。我想使用这个函数来控制同级dom元素,也就是说,我希望功能类似于Jquery prev()函数。它有什么问题?如果您想使用jquery,有previousElementSibling
。previousElementSibling可以添加验证指令的代码吗?@yurzui谢谢您的回复,previousElementSibling为我工作。还知道每个HTML属性都可以在nativeElement上访问。您可以使用@ViewChild
和@ContentChild
绑定,在模板中使用#templateName
查找ElementRef
。如果你分享一些有助于给出正式答案的示例代码,请更新问题。我知道使用ElementRef访问元素。我想使用这个函数来控制同级dom元素,也就是说,我希望功能类似于Jquery prev()函数。它有什么问题?如果您想使用jquery,有previousElementSibling
。previousElementSibling可以添加验证指令的代码吗?@yurzui谢谢您的回复,previousElementSibling为我工作。还知道每个HTML属性都可以在nativeElement上访问。