Javascript 角度指令不适用于*ngIf。从组件调用指令

我有两个div-一个始终可见，另一个在单击按钮后显示（可切换）：

地址
{{{address}

名称
{{name}

我的自定义指令在第一个DIV上运行良好（它更改段落内与“input”中输入的查询相匹配的字母颜色），但在第二个DIV上不起作用

下面是查询为“addr”时“测试地址”的示例：

测试address
其中粗体文本是例如红色文本

但当我有名字John，并且查询是“Joh”时，它也应该在用按钮显示后着色，但它不是

---

据我所知，我需要在单击并切换第二个div之后重新运行该指令。此外，可能我必须延迟执行此操作，因此它有时间显示。如何执行此操作？

ngIf不显示/隐藏元素。ngIf确定DOM上是否存在该元素。您可以通过查看呈现页面的源来验证这一点。将代码改为使用ngHide/Show。

更新

我的指令的问题与*ngFor有关-两个DIV都位于ING ngFor中。只有在根据查询传播新列表之后，我才能调用指令ngOnChanges或ngOnInit。我不知道如何做到这一点，目前，指令在完全加载之前加载-这会导致问题

这是我以前的答案：

多亏了@iHazCode，我终于解决了这个问题

因此，首先，这可能是这里描述的问题的重复：

由于我的指令根据输入查询高亮显示段落中的特定字母，因此每次查询更改时，该指令都应触发，因此我在指令中使用ngOnChanges

这不适用于*ngIf，因为当ngochanges激发时，第二个div和段落不可见

作为一种解决方法，我们可以使用@ViewChildren:

@ViewChildren(QueryHighlightDirective) dirs;

一旦切换了div，就调用它的ngOnChanges方法。在我的例子中，问题与组件中指令的最后一次出现有关：

toggleDetails() {
  ...
  this.dirs.last.ngOnChanges();
}

这正是我想要的，我希望它能帮助别人

---

在我的例子中，我还遇到了另一个问题-定义的div在*ngFor中，它也基于查询进行传播，因此我必须确保在调用ngOnChanges之前传播列表。我还没有找到解决办法。

你做错了什么。我想应该是这样work@ConnorsFan我更正了-“查询”对不起，我被一个文档标题误导了，它来自angular 1。但是您可以使用

[hidden]=“！showDetails”

实际上是正确的。我想不会再有打字错误了。我认为@Kaddath是对的。我应该使用隐藏而不是*ngIf。但我使用动画-不透明度和高度从第一个div滑动第二个div。使用[隐藏]时它将不起作用。有什么建议吗？如果ngIf不显示/隐藏元素，而是如果为false，它就不会将它们发布到DOM。因此，该要素不存在，可免于对其采取行动。我是不是误解了什么？如果使用ngShow/ngHide，这是否有效。使用*ngIf时，我需要一个解决方案。因此，按下切换按钮后，第二个DIV将从第一个DIV（不透明度和高度）开始设置动画。现在，我想重新呈现里面的段落，这样指令就可以应用了。明白了，有道理。有几种方法可以实现这一点，但只访问模板支持代码中的元素并运行指令可能会更简洁。也许在ngOnChanges生命周期钩子期间。请看下面的链接，其中有一些使用ElementRef API的示例：当我有权访问我的元素时，如何重新运行该指令？有没有办法做到这一点？你说你的代码相当复杂，所以我试图避开具体的例子，但答案是肯定的。您是否有在组件代码中使用管道的经验？它的工作原理完全相同。如果没有，我可以试着找到或生成一个简单的例子，可能会有一些用处。也许这就是解决方案？我可以在我的组件中获得所有指令，并重新运行ngOnChanges方法。但据我所知，指令中应该有一个内置方法，允许重新运行它或触发更改检测之类的？

toggleDetails() {
  ...
  this.dirs.last.ngOnChanges();
}