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>

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

有趣的是，这一切都很好，并且当没有选择构面值来配对结果时，单击搜索结果项将按预期方式打开详细信息。但是，如果用户选择了构面（例如选择类别）。然后，当用户单击结果结果时，第一次没有任何反应。但是，如果用户仍然存在并再次单击，则详细信息将按预期方式打开。测试表明，如果用户实际单击页面上的任意位置，然后单击结果，则细节将按预期打开。因此，页面几乎需要重新获得“焦点”。很奇怪。

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

我尝试调试，但是尝试逐步浏览此Angular和zone.js代码是一场噩梦！！！我在用户单击搜索结果时在代码中调用的函数上设置了断点。首次点击永远无法达到。仅在第二次单击。因此，似乎此问题发生在Angular或zone.js中。这可能是一条红色的鲱鱼，但是当我尝试遍历调试器中的代码时，似乎在zone.js中丢失了该事件。但是我不确定。

我知道这不是理想的选择，可能太抽象了，但是我没有主意。因此，请您将有什么想法将不胜感激！

Answer 1

看来这是一条完整的红色鲱鱼。该问题似乎与动态添加的组件无关，而与构面（即复选框）本身无关。

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

谢谢大家！

需要点击两次才能触发（点击）事件

1 个答案: