Angular 6 在指令本身中获取所有具有相同方向名称的元素

Posted 2023-02-22

【中文标题】Angular 6 在指令本身中获取所有具有相同方向名称的元素

【英文标题】：Angular6 get all the elements having same Directive name in the Directive itself

【发布时间】：2019-07-16 05:42:11

【问题描述】：

我有一个名为 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 code

在 StackBlitz Code onHover over h1 tag 中，hovered tag 应该有 1 opacity 其余 h1 tags opacity 应该上升到 0.5。

如果您需要任何其他信息，请发表评论。

【问题讨论】：

请解释一下获取所有元素是什么意思，你到底想用它们做什么？

指令中使用我的“isSelected”指令的元素。在上面的代码中，在指令中我应该得到所有四个 元素引用。

使用 viewChildren 可以选择组件中带有指令的所有元素。我认为您也可以将指令的元素存储在服务中（在您的指令中注入）（即使我认为您可以使用父级从 de 指令中引用组件）但我认为您想要对指令做的所有事情都更好在组件中做

Ferhad 添加了我的用例以及 Stackblitz 中的代码示例。

Eliseo 我在组件级别做不到。我想到了基于服务的方法，但还有其他解决方案吗？

【参考方案1】：

在你的指令的构造函数中，你可以写一些类似的东西

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;
 

然后在指令中，您可以使用相同的服务来获取所有这些元素的列表。

【讨论】：

谢谢，我也想过同样的实现，但有什么方法可以在没有服务的情况下实现？

现在我想不出替代方案。您使用指令的元素分布在不同的组件中，否则我们可以进行一些调整以在具有这些元素的组件中获取这些元素。问题在于坚持这些元素。如果您尝试在指令类本身中维护一个数组，它将丢失，因为每个指令应用的构造函数都被重新调用，并且唯一的持久化方法是通过我能想到的服务。如果出现问题，我将编辑答案。或者，如果您可以详细说明您的用例，可以考虑不同的方法。

添加了 StackBlitz 代码并提供用例，如果您仍有疑问，请告诉我？

我尝试了一些东西，但它们无法正常工作。目前，基于服务的方法可以正常工作。

谢谢 emkay，基于服务的方法就像我的最后一种方法。但如果您发现任何其他方法，请告诉我。

【参考方案2】：

经过深思熟虑，我找到了这种方法。

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

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

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

该方法是在初始化指令时添加一个类，然后在初始化视图时查询添加了类的元素。它对我有用。

【讨论】：

如果它符合您的目的，太好了！但是尽量避免使用 javascript，尽量以 Angular 的方式实现。

谢谢，我同意你的看法，这就像一个临时解决方案。