Angular 结构指令与 CSS 选择器

Question

我正在创建一个自定义下拉菜单。 菜单包含一些项目，当用户单击这些项目中的任何一个时，它应该保持打开状态。 要检查用户是否在下拉菜单中单击，我通过window.onclick if event.target.matches('dropdown-content *')检查。 有关上下文，请参见下面的片段。

    <div id="myDropdown" class="dropdown-content">
        <div class="dropdown-grid">
            <div class="add-offset">
                <div class="dd-header">
                    <div (click)="setupNewCol()"><i class="fas fa-plus plus-sign"></i></div>
                </div>
            </div>
        </div>
    </div>

这可行，但是当我使用 function 将*ngIf添加到 div 时，调用 CSS 选择器'dropdown-content *'似乎不再起作用。 这是带有*ngIf

    <div id="myDropdown" class="dropdown-content">
        <div class="dropdown-grid">
            <div class="add-offset">
                <div class="dd-header">
                    <div *ngIf="!settingNewOffset; else offsetSelection" (click)="setupNewCol()"><i class="fas fa-plus plus-sign"></i></div>
                    <ng-template #offsetSelection>
                        <div (click)="addCol()">
                            CLICK ME
                        </div>
                    </ng-template>
                </div>
            </div>
        </div>
    </div>

随着*ngIf与ng-template结合的引入，CSS 选择器不再将点击识别为'.dropdown-content *'一部分。 为什么会这样，这个问题的解决方案是什么？

Answer 1

1. 为什么它不会注册对目标“下拉内容”的点击可能是因为现在点击的目标是一个 div，没有“下拉内容”。 可能目标父母有那个 class，但没有目标。

2. 检查用户是否点击了任何项目。 您已经有方法addCol()或setupNewCol() 。 如果此方法运行，则用户单击了附加该方法的某些项目。 您也可以将另一种方法附加到项目，例如(click)="addCol(); onItemClick($event)"

onItemClick(event:any) {
console.log(event)
}

3. 我看不到菜单关闭部分在哪里，但使用 onItemClick 您可以取消它或尝试完全取消事件的传播。

(click)="addCol(); event.stopPropagation()"