需要点击两次才能触发(click)事件

Question

我遇到一个问题，在特定情况下，我需要单击两次才能触发 Angualar 6 组件中 DIV 的（单击）事件。

我意识到提供一些示例代码可能会更有帮助。但是需要正确传达的代码段的数量和清理的需要太多了，我担心太多无法消化，甚至可能无法证明对任何人来说都是可重现的。因此，我将尝试描述我正在做的事情以及到目前为止我尝试过的事情，希望有人能够为我指明正确的方向，或者给我一些关于寻找什么的额外想法。

我的应用程序是一个搜索引擎，它在返回和显示结果时还会显示一个构面列表以进一步缩小结果范围。例如，一个构面可能包含相关类别的列表，每个类别旁边都有一个复选框。当用户选中复选框时，搜索结果会缩小，只显示符合所选类别的结果。构面列表仅在初始搜索时构建一次，并且在完成全新搜索之前保持不变。然后，用户可以单击结果项以导航到详细信息页面，显示有关他们选择的结果项的更详细信息。

使用以下 HTML 模板片段显示构面：

<div class="facet-spacer-top"></div>
            <ng-container *ngIf="facets">
                <ng-container *ngFor="let facet of facets; let index = index">
                    <ng-container *ngIf="facet.isFacetList()">
                        <facet-list-comp [facet]="facet" [facetIndex]="index" (facetChangeEvent)='onFacetChange($event)'></facet-list-comp>
                    </ng-container>
                    <ng-container *ngIf="facet.isFacetDateRange()">
                        <facet-date-range-comp [facet]="facet" (facetChangeEvent)='onFacetChange($event)'></facet-date-range-comp>
                    </ng-container>
                </ng-container>
            </ng-container>

搜索结果使用以下 HTML 模板片段显示：

 <div *ngFor="let rowNum of results | rows:3; let idx=index;" class="row result-row no-gutter">
                    <div *ngFor="let result of results | slice:(idx*3):((idx+1)*3); let jdx=index;" class="col-md-4">
                        <ng-container *ngComponentOutlet="getResultComponent(); injector: getProvider(result, (idx * 3) + jdx);"></ng-container>
                    </div>
                </div>

结果是动态添加的，因此可以使用特定结果的正确组件类型来显示结果。例如，我们的结果可能包括自行车和汽车。我们用来显示自行车结果的组件与我们用来显示汽车结果的组件不同。

有趣的是，这一切都非常有效，当没有选择构面值来配对结果时，单击搜索结果项将按预期打开详细信息。但是，如果用户选择一个方面（例如选择类别）。然后，当用户第一次点击结果时，什么也没有发生。但是，如果用户坚持并再次单击，详细信息将按预期打开。测试表明，如果用户实际单击页面上的任意位置，然后单击结果，则详细信息将按预期打开。所以这几乎就像页面需要重新获得"focus"。很奇怪。

到目前为止，我已经尝试放弃 Angular（单击）事件绑定以获取句柄 DOM HTML 元素并自己附加事件。加载结果后，我尝试以编程方式将焦点设置到页面上的元素。加载搜索结果后，我尝试以编程方式单击页面上的 DIV 元素。所有这些都导致了相同的行为。

我已尝试调试，但尝试逐步执行此 Angular 和 zone.js 代码简直就是一场噩梦！！！当用户单击搜索结果时，我在我的代码中调用的函数上设置了断点。它永远不会在第一次点击时达到。仅在第二次点击时。所以这个问题似乎发生在 Angular 或 zone.js 的某个地方。这可能是一个转移注意力的问题，但当我尝试在调试器中遍历代码时，事件似乎在 zone.js 中丢失了。但我不确定。

我知道这不理想，可能太抽象了，但我没有想法。因此，如果您有任何想法，我们将不胜感激！

Answer 1

看来这完全是转移注意力。该问题似乎与动态添加的组件没有任何关系，但与作为复选框的方面本身有关。

我仍然不确定问题是什么，但这个问题和线程似乎不再与我遇到的问题相关。

谢谢大家！

需要点击两次才能触发(click)事件

Need to click twice to trigger (click) event

zone.js

angular