Angular指令与* ngIf不兼容。从组件调用指令 [英] Angular Directive not working with *ngIf. Calling directive from component

问题描述

< DIV>
< div>
< small> ADDRESS< / small>
< p [appQueryHighlight] =查询> {{地址}}< / p>
< / div>
< / div>

< div * ngIf =showDetails>
< div>
< small> NAME< / small>
< p [appQueryHighlight] =查询> {{名称}}< / p>
< / div>
< / div>


我的自定义指令适用于第一个DIV（它改变了匹配段落中字母的颜色该查询是在输入中输入的），但不适用于第二个DIV。

下面是一个示例，说明查询地址 addr：


Test addr ess
其中，粗体文本为例如红色文本。

<但是，当我有John的名字，并且查询是Joh时，它也应该用按钮显示颜色，但它不是。

据我了解，我需要在点击并切换第二个div后重新运行该指令。另外，可能我必须延迟这样做，所以它有时间显示。

解决方案

更新

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

这是我以前的回答：我最终设法解决了这个问题，感谢@iHazCode。

所以首先，这是可能是此处描述的问题的重复：组件

由于我的指令突出了基于输入查询的段落中的特定字母，每次查询更改时，指令都应该触发，因此我使用ngOnChanges和指令。

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

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

  @ViewChildren（QueryHighlightD irective）dirs; 
  

然后调用它的ngOnChanges方法，一旦div被切换。在我的例子中，问题与组件内指令的最后一次发生有关：

  toggleDetails（）{
 ... 
 this.dirs.last.ngOnChanges（）; 
} 
  

这正是我所期待的，我希望它能帮助别人。

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

I have two DIVs - one, that is always visible, and another one, that gets displayed after I click a button (it is toggable):

<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>

My custom directive works well on the first DIV (it changes the color of letters inside the paragraph that match the query entered in an "input"), but does not work on the second DIV.

Here is an example of how "Test address" looks like when query is "addr":

Test address
where bold text is for example red-colored text.

But when I have name John, and query is "Joh", it should also be colored once shown with the button, but it is not.

As I understand, I need to re-run the directive after I click and toggle the second div. Also, probably I have to do this with delay, so it has time to be shown. How can I do this?

解决方案

UPDATE

Problem with my directive is related to *ngFor - both DIV are located withing ngFor. I have to call directive ngOnChanges or ngOnInit only after the new list get propagated based on the query. I have no idea how to do this, and currently, directives get loaded before ngFor fully loads - this cause problems.

Here is my previous answer:

I finally managed to solve this problem, thanks to @iHazCode.

So firstly, this is probably a duplication of problem described here: Angular 4 call directive method from component

Because my directive hightlights the specific letters in paragraph based on input query, each time the query changes, the directive should fire, thus I am using ngOnChanges withing the directive.

This is not working with *ngIf, because when ngOnChanges fires, the second div and paragraph is not visible.

As a workaround, we can access the directive from out component using @ViewChildren:

@ViewChildren(QueryHighlightDirective) dirs;

And then call it's ngOnChanges method, once div is toggled. In my case, the problem was related with last occurence of the directive within the component:

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

That was exactly what I was looking for, I hope it will help someone.

In my case I also encountered another problem - the defined DIVs are within *ngFor, which is also propagated based on the query, so I have to make sure that the list will get propagated before calling ngOnChanges. I haven't find a solution for this yet.

这篇关于Angular指令与* ngIf不兼容。从组件调用指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！