Question

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

在h1标签上的onHover上的StackBlitz代码中，悬停的标签应具有1个不透明度，其余的h1标签的不透明度应提高到0.5。

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

Answer 1

在指令的构造函数中，您可以编写类似

的内容

SELECT Name, Salary, Experience
FROM   (
  SELECT t.*,
         DENSE_RANK() OVER ( ORDER BY Salary DESC ) AS s_rank,
         ROW_NUMBER() OVER ( ORDER BY Experience DESC ) AS Exp_rownum
  FROM   table_name t
)
WHERE s_rank = 3
AND   Exp_rownum = 1;

无论哪个元素应用此指令，都会调用其构造函数。创建一个服务来维护所有这些元素的数组，并通过调用每个构造函数的方法将元素推送到其中。这条线上的东西

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

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

Answer 2

经过深思熟虑，我发现了这种方法。

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

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

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

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

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

2 个答案: