css - 如何在angular4中编写条件css？

Question

我有一个表，其中每一行都基于 api 数据循环。在一列中，我有一个编辑图标，单击该图标将打开一个弹出窗口。我只想一次显示一次弹出窗口，这意味着如果打开一个弹出窗口，用户将无法单击其余的编辑图标。我只是尝试使用 css - "pointer-events: none"来禁用图标但是如何写条件？

Answer 1

首先，您需要有权访问弹出窗口(通用实用程序)，它可以告诉您弹出窗口是打开还是关闭。您可以通过变量或方法维护它 - 取决于您在应用程序中构建/使用弹出功能的方式。

如果您使用任何 Angular 特定的内置库来弹出，那么它可能有这个实用程序。

一旦获得弹出窗口打开状态，那么在 Angular 模板中有多种方法可以用来将指针事件设置为禁用图标:

1. NgClass - <a class="icon" [ngClass]="{'pointer-none': popup_isOpen}"></a>

同样在你的 css 中定义类 -

.pointer-none {
pointer-events : none;
}

1. NgStyle - <a class='icon' [ngStyle]="{'pointer-events': popup_isOpen ? 'none' : 'inherit'}"></a>