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. btw前面的selected，只是看到了现在），每次点击了您的链接，以便在您第一次点击所有商品时获取课程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>

Angular 2通过id更改css

1 个答案: