如何在Angular 2+中动态控制父元素的类；关于输入焦点？

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

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

我遇到的问题是，当

bordered

类应用于

focus

时，所有

.parent元素

div都会获得边框，因为

myBooleanVariable

要么为真，要么为假。我希望避免使用静态变量，如

myBooleanVariable1

，

myBooleanVariable2

，等等

---

如何实现这一点？

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

foccused: number | string;

然后可以使用

[ngClass]

将边框应用于父元素，如下所示：

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

其中

addBorder（）

变为：

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

下面是stackblitz，向您展示了如何：

您可以使用

ElementRef

和

render2

做一些更奇特的事情，但是对于您所需要的，以上内容应该足够了

---

这种方法的额外好处是可以在循环中进行扩展，如果您有一个输入数组想要一个接一个地输出，只需将索引替换为

*ngFor

提供的索引，您就可以使用JS从组件方法中添加和删除类，它是为包装器创建一个模板变量，并将该变量粘贴到方法params中，即在获得包装器HtmleElement的方法中

@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');
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
项目=[1,2,3]；
addBorder（换行：HtmleElement）{
wrap.classList.add（'bordered'）；
}
removeBorder（换行：HtmleElement）{
wrap.classList.remove（'bordered'）；
}
}

谢谢，@izmaylovdev！

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

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

@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');
  }
}