角2/4、 "ngStyle"。父親の要素を無効にする異なるスタイルを適用する

Question

親要素がアクティブになったときに要素にスタイルを適用する必要があります。私はrouterLinkActiveを使ってCSS Classを適用していますが、父の要素がactiteであればdeppendingはインラインスタイル（display：ブロック）を適用し、他の場合は別の（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> 

を、私は彼らのrespectivesリンクを持つアイテムの拡張リストを持っています。各「サブメニュー」には、独自の要素リストがあります。

Answer 1

これはCSSで実現することができます。

.sub-menu { 
    display: none; 
} 

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

それがどのように動作するかを確認するには、このlive demoをチェックしてください。

Answer 2

このようにしたい場合は、データバインディングを使用してリアルタイムで動的に変更できるように、オブジェクトまたはメニューをメニューから作成することをお勧めします。

「角度」で動的メニューを作成するには、コンポーネント内にメニューの表現を作成するだけです。データベースからメニューを読み込んだり、複雑な変更を加えたりする予定がない場合は、静的な値を指定することもできます。それ以外の場合は、メニューのクラスやサブメニューを作成して、オブジェクト指向プログラミングを最大限に活用することができます。

コンポーネント：あなたのコンポーネントに設定あなたのメニューを持っていたら

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

、あなたは、あなたのHTMLにブラケットを結合角度データを使用して、HTMLの繰り返しを避けるために* ngForを使用することによって、それは完全に動的にすることができます。

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

メニューを非アクティブにしました。

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> 

あなたはまた、フラグを制御するために、ルータのアクティブディレクティブを使用することができます。

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

、他の場所の代わりにflagのlink.isActiveを使用しています。