Angular 2/4，“ngStyle”。应用不同的样式，依赖其父元素活动o不活动

问题描述：

当父元素处于活动状态时，我需要将样式应用于元素。我使用routerLinkActive来应用CSS类并且工作正常，但是如果父元素是actite应用一种内联样式（display：block），则在其他情况下应用另一种（display：none）。Angular 2/4，“ngStyle”。应用不同的样式，依赖其父元素活动o不活动

如果父元素是活跃：

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

我有一个项目与他们的respectives链接的扩展列表。每个“子菜单”都有自己的元素列表。

你的菜单是在'* ngFor'里面还是静态的？你如何将''active''类应用到''''标签？ – snaplemouton

是一个静态的。我使用“routerLinkActive” – Ricky

申请活动班级哦，我看到了，那么@Alex答案对你更好 – snaplemouton

答

这可以只用CSS来实现：

.sub-menu { 
    display: none; 
} 

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

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

谢谢，但我需要使用ngStyle。 – Ricky

答

如果你想以这种方式做到这一点，我建议你做一个对象或数组在你的菜单之外，所以你可以使用数据绑定实时动态更改它。

要使用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"

您“礼”的标签，以使其处于活动状态或不活动上点击或

(click)="SetActive(menu)"

创建您的组件的功能，将设置旁边的每一个菜单点击菜单不活动。

我需要使用ngStyle指令:( – Ricky

）只需要编写'[ngStyle] =“menu.active？'{display：block}'：'{display：none}'”'。组件或使用[className]并为活动和非活动子菜单创建CSS类 – snaplemouton

答

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

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

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

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

而且使用link.isActive，而不是其他地方flag。

Angular 2/4，“ngStyle”。应用不同的样式，依赖其父元素活动o不活动

相关推荐