角2のIDでのCSSの変更

Question

idでクリックされたメニューcssを変更しようとしています。別のメニューをクリックすると、他のすべての人がそのスタイルを失い、クリックされたものだけがスタイルを獲得します。

でも、私はこれをやろうとしているわけではありません。

あなただけ（編集：あなたは、ちょうど今のを見て、ところであなた selectedの前で this.を忘れる） selectedを設定している現時点では

import { Component } from '@angular/core'; 
import { NgClass } from '@angular/common'; 

@Component({ 
    selector: 'my-header', 
    template: ` 
     <nav class="navbar navbar-default navbar-static-top"> 
      <ul class="nav navbar-nav"> 
       <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="1">Menu 1</a></li> 
       <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="2">Menu 2</a></li> 
       <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="3">Menu 3</a></li> 
       <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="4">Menu 4</a></li> 
      </ul> 
     </nav> 
    `, 
    styles: [` 
     .selectedClass { 
      color: #cc0000; 
      background-color: #ffffff; 
     } 
    `] 
}) 
export class HeaderComponent { 
    selected = false; 

    selectId(event) { 
     console.log(event.currentTarget.id); 
     selected = true; 
    }  
} 

Answer 1

まあ、trueにあなたのリンクのたびに1が最初にそうクリックされましたあなたのすべてのアイテムをクリックすると、クラスselectedClassが得られ、その後は何も変わりません。

例をあまり変更しないと、ブール値の代わりに最新のクリックされた項目のIDを渡して保存することができます。項目がselectedClassの場合は、選択したIDをチェックしてください。このような

何か：

<ul class="nav navbar-nav"> 
     <li><a [ngClass]="{'selectedClass': selected == 1}" (click)="selectId(1)">Menu 1</a></li> 
     <li><a [ngClass]="{'selectedClass': selected == 2}" (click)="selectId(2)">Menu 2</a></li> 
     <li><a [ngClass]="{'selectedClass': selected == 3}" (click)="selectId(3)">Menu 3</a></li> 
     <li><a [ngClass]="{'selectedClass': selected == 4}" (click)="selectId(4)">Menu 4</a></li> 
</ul> 

export class HeaderComponent { 
    selected: number; 

    selectId(id: number) { 
     this.selected = id; 
    }  
} 

---

より良いアプローチは、おそらくあなたが合格する値を心配する必要はありませんので、最初の場所であなたのナビゲーション項目の定義されたオブジェクトを使用することです/このようなことを確認し、より動的にする。あなたのクラスで（あるいは@Input()経由で）直接リンクを定義することができますたとえば

は、*ngForがあなたのナビゲーションを構築し、直接「ナビゲーション項目は、オブジェクト」の周囲を通過してみましょう。

export class HeaderComponent { 
    @Input() navigationItems: any[] = [  // defined a default array as example 
     { 
      text: 'Menu 1', 
      selected: false 
     } 
    ]; 

    onItemClick(item: any) { 
     this.navigationItems.map((navItem) => { 
      navItem.selected = navItem === item; 
     }); 
    } 
} 

<ul class="nav navbar-nav"> 
    <li *ngFor="let item of navigationItems"> 
     <a [ngClass]="{'selectedClass': item.selected}" 
      (click)="onItemClick(item)"> 
      {{item.text}} 
     </a> 
    </li> 
</ul>