Angular6在指令本身中获得所有具有相同指令名称的元素

Question

I have a Directive named isSelected and I apply it on few elements in different components like

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

No how can I get the elements using 'isSelected' Directive in the Directive itself.

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

StackBlitz code

In the StackBlitz Code onHover over h1 tag, hovered tag should have 1 opacity rest h1 tags opacity should rise to 0.5.

Please comment if you need any additional information.

Answer 1

Inside the constructor of your directive you can write something like

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

Whichever element applies this directive, it's constructor will be called. Create a service which maintains the array of all these elements and with every constructor called push the element to it. Something on this line

@Inject()


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

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

Then inside the directive you can use the same service to get the list of all those elements.

Answer 2

I found this approach after giving it a lot of thought.

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

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

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

The approach is Adding a class while the directive is initialized and later when the view is initialized querying the elements with the class added. It worked for me.