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

3 回答

• 0

  这只能通过CSS实现：

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

  看看这个live demo看看它是如何工作的 .

  回复于 2024-04-17T00:55:39+08:00
• 0

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

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

  回复于 2024-04-17T00:55:39+08:00
• 0

  如果你想以角度方式这样做，我建议你从菜单中制作一个对象或数组，这样你就可以使用数据绑定实时对其进行动态更改 .

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

  零件：

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

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

  HTML：

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

  您可以使用[ngStyle]一次提供多个样式 .

  你可以加

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

  到你的'li'标签，使其在点击或激活时处于活动或非活动状态

  (click)="SetActive(menu)"
  

  在组件中创建一个功能，将所单击菜单旁边的每个菜单设置为非活动状态 .

  回复于 2024-04-17T00:55:39+08:00