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

【问题标题】：How to dynamically control class of parent element in Angular 2+ on input focus?如何在输入焦点上动态控制Angular 2+中的父元素类？
【发布时间】：2018-06-11 22:17:46
【问题描述】：

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

HTML（只是输入元素之一，因为它们都以相同的方式编码）：

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

TypeScript：

addBorder() {
  this.myBooleanVariable = true;
}

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

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

我怎样才能做到这一点？

【问题讨论】：

标签： angular angular2-routing angular2-template

【解决方案1】：

您可以使用 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');
  }
}

【讨论】：

谢谢，@izmaylovdev！

【解决方案2】：

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

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;
}

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

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

这种方式还有一个额外的好处是可以在循环中扩展，如果你有一个输入数组想要一个接一个地输出，只需将 index 替换为*ngFor提供的索引

【讨论】：