带有 CSS 选择器的 Angular 结构指令答案

【问题标题】：Angular structural directive with CSS selector带有 CSS 选择器的 Angular 结构指令
【发布时间】：2022-01-26 18:16:01
【问题描述】：

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

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

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

    <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 *' 的一部分。为什么会这样？解决这个问题的方法是什么？

【问题讨论】：

标签： html angular css-selectors ng-template angular-structural-directive

【解决方案1】：

为什么它不会注册对目标“下拉内容”的点击可能是因为现在点击的目标是一个 div，没有“下拉内容”。可能目标父级具有该类，但没有目标。
检查用户是否点击了任何项目。您已经有方法addCol() 或setupNewCol()。如果此方法运行，则用户单击了附加该方法的某些项目。您也可以将另一种方法附加到该项目，例如 (click)="addCol(); onItemClick($event)"

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

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

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

【讨论】：