Angular 指令不适用于 *ngIf。从组件调用指令

Question

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

<div>
  <div>
    <small>ADDRESS</small>
    <p [appQueryHighlight]="query">{{ address}}</p>
  </div>
</div>

<div *ngIf="showDetails">
  <div>
    <small>NAME</small>
    <p [appQueryHighlight]="query">{{ name}}</p>
  </div>
</div>

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

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

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

但是当我有名字 John，并且查询是“Joh”时，它也应该用按钮显示一次，但它不是。

据我了解，单击并切换第二个 div 后，我需要重新运行指令。另外，可能我必须延迟执行此操作，因此有时间显示。我该怎么做？

Answer 1

更新

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

这是我之前的回答：

感谢@iHazCode，我终于设法解决了这个问题。

首先，这可能是这里描述的问题的重复：Angular 4 call directive method from component

因为我的指令根据输入查询突出显示段落中的特定字母，每次查询更改时，该指令都应该触发，因此我使用 ngOnChanges 与该指令。

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

作为一种解决方法，我们可以使用 @ViewChildren 从 out 组件访问指令：

@ViewChildren(QueryHighlightDirective) dirs;

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

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

这正是我一直在寻找的东西，我希望它会对某人有所帮助。

在我的情况下，我还遇到了另一个问题 - 定义的 DIV 在 *ngFor 中，它也是基于查询传播的，所以我必须确保在调用 ngOnChanges 之前传播列表。我还没有找到解决方案。

Answer 2

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