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”时“测试地址”的示例：

测试 addr ess
粗体文本例如是红色文本。

但是当我有名字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。

Angular Directive不使用* ngIf。从组件

2 个答案: