如何在angular4中编写条件css?

时间:2017-10-12 05:22:54

标签: css angular

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

1 个答案:

答案 0 :(得分:1)

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

如果您使用任何Angular特定的内置库进行弹出,那么它可能具有此实用程序。

一旦弹出打开状态,Angular模板中有多种方法可用于将指针 - 事件无设置为禁用图标:

  1. NgClass - <a class="icon" [ngClass]="{'pointer-none': popup_isOpen}"></a>
  2. 同样在你的css定义类 -

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

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