Angular 2 通过 id 更改 css

Question

我正在尝试更改通过 id 点击的菜单 css，当点击另一个菜单时，所有其他菜单都失去了他们的风格，只有被点击的才能赢得风格。

但我不想这样做，有人可以帮助我吗？

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

好吧，目前你只是将selected （编辑：你忘记了this. 前面的this. 顺便说一句，现在才看到）设置为true 每次点击你的一个链接，依此类推你第一次点击你所有的项目都会得到selectedClass这个类，之后就没有其他任何改变了。

无需过多修改您的示例，您只需传递并保存最新点击项目的 id，而不是布尔值。然后只需检查选定的 id 项目是否应该有 selectedClass。

类似这样的：

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