Angular6 получает все элементы с одинаковым названием в самой директиве - PullRequest
Новая
       37

Angular6 получает все элементы с одинаковым названием в самой директиве

0 голосов
/ 22 февраля 2019

У меня есть директива с именем isSelected, и я применяю ее к нескольким элементам в разных компонентах, таких как 

<i isSelected class="icon"></i>
<i isSelected class="icon"></i>
<i isSelected class="icon"></i>
<i isSelected class="icon"></i>

Нет, как я могу получить элементы, используя директиву isSelected в самой директиве.

@Directive({
 selector: '[isSelected]'
})
export class IsSelectedDirective {
   //I need to get all the elements using my directive
}

Код StackBlitz

В теге onHover над h1 кода StackBlitz тег hovered должен иметь 1 непрозрачность, остальные теги h1 непрозрачность должна возрасти до 0,5.

Пожалуйста, прокомментируйте, если вам нужна дополнительная информация.

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019

Я нашел этот подход после долгих размышлений. 

@Directive({
 selector: '[isSelected]'
})
export class IsSelectedDirective {
  allElements;

  ngOnInit() {
    this.renderer.addClass(this.elem.nativeElement, 'isSelected')
  }

  ngAfterViewInit() {
    this.allElements = this.document.querySelectorAll('.isSelected');
  }
}

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

0 голосов
/ 22 февраля 2019

Внутри конструктора вашей директивы вы можете написать что-то вроде 

constructor(private el: ElementRef, private myService: MyService) {
    myService.push(el); 
}

Какой бы элемент не применил эту директиву, будет вызван его конструктор.Создайте сервис, который поддерживает массив всех этих элементов и с каждым вызванным конструктором помещает элемент в него.Что-то в этой строке 

@Inject()


export class MyService{
 private elementArray: Array<ElementRef> = [];

 public push(el: ElementRef) {
    this.elementArray.push(el):
 }
 public getElements() {
 return this.elementArray;
 }
}

Затем внутри директивы вы можете использовать один и тот же сервис для получения списка всех этих элементов.

...