Question

我是Angular 2中DOM操作的新手。我试图根据元素的属性值修改兄弟元素。

e.g。如果输入包含必需属性，则在标签上添加星号（星号）。

我有一个可以访问属性的指令，＆amp;输入字段的表单控件。现在我想从这个指令中修改兄弟标签。

我知道nativeElement＆amp; 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;修改标签或任何其他相邻元素，即子，父，兄弟。

任何有关此类基本操作的参考文档都将是一个很大的帮助。

Answer 1

关于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;方式！

Answer 2

了解指令中的 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 来处理每个指令实例。

从Angular 2指令修改Sibling DOM元素

2 个答案: