Question

当父元素处于活动状态时，我需要将一个样式应用于元素。我正在使用routerLinkActive来应用CSS类并且工作正常，但如果父元素是actite，则应用一个内联样式（display：block），在其他情况下应用另一个（display：none）。

如果父元素处于活动状态：

<li class="active">
   <ul class="sub-menu" style="display: block;">
</li>
<li>
   <ul class="sub-menu" style="display: none;">
</li>

当我选择另一个元素时：

<li>
   <ul class="sub-menu" style="display: none;">
</li>
<li class="active">
   <ul class="sub-menu" style="display: block;">
</li>

我有一个扩展的项目列表及其各自的链接。每个“子菜单”都有自己的元素列表。

Answer 1

这只能通过CSS来实现：

.sub-menu {
  display: none;
}

.active .sub-menu {
  display: block;
}

查看此live demo以查看其工作原理。

Answer 2

如果您想以角度方式执行此操作，我建议您从菜单中创建一个对象或数组，以便您可以使用数据绑定实时对其进行动态更改。

要使用Angular制作动态菜单，只需在组件中创建菜单的表示。如果您不打算从数据库加载菜单或对其进行更复杂的修改，则可以为其提供静态值。否则，您可以为菜单甚至子菜单创建一个类，以充分利用面向对象的编程。

组件：

public int getDeaths(Player p) {
    if (!plugin.getConfig().getBoolean("mysql")) {
        return plugin.data.getConfig().getInt("Deaths." + p.getUniqueId() + ".death");
    }
    if (plugin.getConfig().getBoolean("mysql")) {
        int res = 0;
        ResultSet result = getMainSQLConnection()
                .executeQuery("SELECT * FROM `Account` WHERE playername='" + p.getName() + "'", false);
        try {
            if (result.next()) {
                res = Integer.parseInt(result.getString("deaths"));
            }
        } catch (SQLException localSQLException) {
        }
        return res;
    }
    return 0;
}

public void setDeaths(Player p, int number) {
    if (!plugin.getConfig().getBoolean("mysql")) {
        plugin.data.getConfig().set("Deaths." + p.getUniqueId() + ".death", number);
        plugin.data.save();
    }
    if (plugin.getConfig().getBoolean("mysql")) {
        plugin.sqlConnection.executeUpdate(
                "UPDATE `Account` SET deaths='" + number + "' WHERE playername='" + p.getName() + "'");
    }
}

在组件中设置菜单后，可以通过在html中使用角度数据绑定括号并使用* ngFor来避免重复html，使其完全动态化。

HTML：

menus: any [] = {
    { subMenus: any [] = { {}, {} }, active: boolean = true; },
    { subMenus: any [] = { {}, {} }, active: boolean = false; }
}

您可以使用[ngStyle]一次提供多种样式。

您可以添加

<li *ngFor="let menu of menus" [className]="menu.active?'active':''">
   <ul *ngFor="let subMenu of menus.subMenus class="sub-menu" [style.display]="menu.active?'block':'none'">
</li>

到你的'li'标签，使其在点击或

上处于有效或无效状态

(click)="menu.active=!menu.active"

在您的组件中创建一个功能，该功能会将点击的菜单旁边的每个菜单设置为无效。

Answer 3

如果使用布尔标志模板变量：

<li [class.active]="flag">
   <ul class="sub-menu" [style.display]="flag ? 'block' : 'none'">
</li>
<li>
   <ul class="sub-menu" [style.display]="flag ? 'none' : 'block'">
</li>

您还可以使用路由器active指令来控制标志：

<li [class.active]="link.isActive" #link="routerLinkActive">

在其他地方使用link.isActive代替flag。

Angular 2/4，“ngStyle”。应用不同的样式，使其父元素活动为非活动状态

3 个答案: