如何在输入焦点上动态控制Angular 2+中父元素的class？

Question

我有一系列位于元素内部的输入框，我想让输入框的父元素根据鼠标聚焦的位置分别具有边框。代码如下所示：

HTML（只是其中一个输入元素，因为它们的编码方式都是一样的）：

<div class="parent-element">
  <input type="text"
    [class.bordered]="myBooleanVariable"
    (focus)="addBorder()"
    (blur)="removeBorder()"
  />
</div>

打字稿：

addBorder() {
  this.myBooleanVariable = true;
}

removeBorder(event) {
  this.myBooleanVariable = false;
}

我遇到的问题是，当 bordered class 应用于 focus 时，所有 .parent-element div 都会获得边框，因为 myBooleanVariable 为真或为假。我想避免制作像 myBooleanVariable1、myBooleanVariable2 等静态变量

我怎样才能做到这一点？

Answer 1

如果你给每个输入一个索引，你可以有一个局部变量来控制对聚焦输入的引用。

foccused: number | string;

然后您可以使用 [ngClass] 将边框应用于您的父元素，例如：

<div class="parent-element" [ngClass]="{ 'bordered' : isFocussed(1) }">

所以不用设置布尔值，而是用 addBorder(1) 设置一个数字，例如..

<div class="parent-element" [ngClass]="{ 'bordered' : isFocussed(1) }">
   <input type="text"
   (focus)="addBorder(1)"
   (blur)="removeBorder()"/>
</div>

其中 addBorder() 变为：

addBorder(index: number) {
  this.foccused = index;
}

这是一个向您展示如何操作的 stackblitz：https://stackblitz.com/edit/angular-qqwqjd

您可以使用 ElementRef 和 Renderer2 做一些更花哨的事情，但对于您需要的，以上内容应该足够了。

这种方式带来了在循环中可扩展的额外好处，如果你有一组输入你想一个接一个地输出，只需将索引替换为 *ngFor[=21 提供的索引=]

Answer 2

您可以使用 JS 从组件方法中添加和删除类，为此，它为您的包装器创建一个模板变量，并将此变量粘贴到方法参数中，在您获得的方法中包装器的 HTMLElement

@Component({
  selector: 'my-app',
  template: `
    <div class="parent-element" *ngFor="let i of items" #wrap>
      <input type="text"
        (focus)="addBorder(wrap)"
        (blur)="removeBorder(wrap)"
      />
    </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  items = [1,2,3];

  addBorder(wrap: HTMLElement) {
    wrap.classList.add('bordered');
  }

  removeBorder(wrap: HTMLElement) {
    wrap.classList.remove('bordered');
  }
}

如何在输入焦点上动态控制Angular 2+中父元素的class？

How to dynamically control class of parent element in Angular 2+ on input focus?

angular2-template

angular2-routing

angular