Как динамически управлять классом родительского элемента в Angular 2+ на фокусе ввода? - PullRequest
Новая
       23

Как динамически управлять классом родительского элемента в Angular 2+ на фокусе ввода?

0 голосов
/ 12 июня 2018

У меня есть ряд полей ввода, которые находятся внутри элемента, и я хочу, чтобы родительский элемент полей ввода по отдельности имел границу в зависимости от того, где находится мышь.Код выглядит следующим образом:

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 получают границы, поскольку myBooleanVariable является либо истиннымили ложьЯ хочу избежать создания статических переменных, таких как myBooleanVariable1, myBooleanVariable2 и т. Д.

Как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

вы можете добавлять и удалять классы, используя 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');
  }
}
0 голосов
/ 12 июня 2018

Если вы даете каждому входу индекс, у вас может быть одна локальная переменная, которая управляет ссылкой на фокусированный вход.

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, но для того, что вам нужно, вышеуказанного должно быть достаточно.

Этот способ сопровождается дополнительным бонусом возможности расширения в цикле, если у вас есть массиввходы, которые вы хотели выводить один за другим, просто замените индекс на индекс, предоставленный *ngFor

...