У меня есть компонент, который имеет раскрывающийся список начальной загрузки, я хочу сосредоточиться на текущей неделе, которая установлена в раскрывающемся диапазоне

Я могу сделать это с помощью простого javascript, установив идентификаторы, а затем используя метод Jquery .focus (), чтобы сосредоточиться на нем, но хотел знать, есть ли какой-нибудь угловой 7 / 7+ способ сделать это с помощью ViewChildren и т. Д.

<button class="btn dropdown-toggle"
        (click)="focusOnWeek(currentWeek)"
        type="button" data-toggle="dropdown">
  <span>Week {{currentWeek}}</span> // currentWeek = 5 need to focus on week 5 <a> tag on click of this span
</button>
<ul class="dropdown-menu">
  <li *ngFor="let week of weekList">//weekList = [1,2,3,4,5,6,7,8,9,10]>
    <a class="dropdown-item"
      Week {{week}} 
    </a>

  </li>
</ul>

При нажатии кнопки текущая неделя фокусируется.

4
dota2pro 13 Апр 2019 в 00:51

2 ответа

Лучший ответ

Вы можете использовать ViewChildren, чтобы найти элемент привязки, на который вы хотите сфокусироваться. Сначала вы устанавливаете ссылочную переменную шаблона (например, #anchor) для элементов привязки:

<ul class="dropdown-menu">
  <li *ngFor="let week of weekList">
    <a #anchor class="dropdown-item">Week {{week}}</a>
  </li>
</ul>

В коде вы получаете ссылку на якорные элементы с ViewChildren:

@ViewChildren("anchor") anchorList: QueryList<ElementRef>;

И вы устанавливаете фокус на якорь, который соответствует указанной неделе:

focusOnWeek(week) {
  const weekIndex = this.weekList.indexOf(week);
  const elementRef = this.anchorList.find((item, index) => index === weekIndex);
  elementRef.nativeElement.focus();
}

См. этот стековый блик для демонстрации.


Если меню не отображается сразу после щелчка, вы можете отслеживать создание пунктов меню с событием QueryList.changes. Когда вы обнаружите, что элементы видны, вы можете установить фокус с помощью currentWeek.

ngAfterViewInit() {
  this.anchorList.changes.subscribe(() => {
    if (this.anchorList.length > 0) {
      const weekIndex = this.weekList.indexOf(this.currentWeek);
      const elementRef = this.anchorList.find((item, index) => index === weekIndex);
      elementRef.nativeElement.focus();
    }
  });
}

См. этот стек-блиц для демонстрации.

3
ConnorsFan 12 Апр 2019 в 23:30

Пожалуйста, добавьте следующий код в HTML-файл

 <ul class="dropdown-menu">
      <li class="dropdown-item" [ngClass]="{'focus': currentWeek === week}" *ngFor="let week of weekList">
        <a>
          Week {{week}} 
        </a>

      </li>
    </ul>

Добавить следующий класс в CSS-файл

.focus{
   background-color: red;
}

Убедитесь, что обнаружение изменений реализовано в функции focusOnWeek ().

0
Armin 12 Апр 2019 в 22:41