Css 如何在angular6中应用样式

我想在单击预期id时应用文本颜色

     <nav class="navbar ">
        <ul class="navbar-nav">
          <li *ngFor="let item of items">
         <a class="nav-link" >{{item.title}}</a>
          </li>
        </ul>
      </nav>


items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

---

对于单击的id，我必须应用文本颜色红色。如何应用它。请帮助

您可以有一个带有活动id的变量，该变量在单击时设置：

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

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
     public activeId;

      setIdActive(id) {
        this.activeId = id;
      }

    }

在您的html中：

<nav class="navbar ">
        <ul class="navbar-nav">
          <li *ngFor="let item of items">
         <a (click)="setIdActive(item.id)" class="nav-link" [ngClass]="{'apply-color': item.id == activeId}" >{{item.title}}</a>
          </li>
        </ul>
</nav>

{{item.title}

---

应用颜色这是一个具有所需颜色的类

此答案符合我们需要突出显示所单击的所有选项的条件

如果您想更改所单击的所有链接的颜色，而不仅仅是最后一个，我建议您使用

HostListener

指令

consructor(privte elem: ElementRef, private renderer: Renderer) { }

@HostListener('click',['$event'])  //in your case, the event parameter can be omitted
Click(event: Event) {
    this.renderer.setElementStyle(elem.nativeElement, 'color', 'red');
}

---

如果只是

a:visitored

的CSS样式对您有效（我自己没有尝试过），那么它将是解决此问题的最佳解决方案。单击链接时，将项目传递给函数。这将更改activeId。通过使用[ngClass]，该类将应用于链接

让activeId:number；
makeALinkActive（项目）{
this.activeId=item.id；
}
items=[{id:1，title:“a”}，{id:2，title:“b”}，{id:2，title:“c”}，{id:3，title:“d”}]

.red{
颜色：红色；
}

{{item.title}

在数组中添加第三个属性

单击

，并将其与html中的

ngClass

一起使用。如果你愿意，我可以给你举个例子。你能扩展你的问题吗？

consructor(privte elem: ElementRef, private renderer: Renderer) { }

@HostListener('click',['$event'])  //in your case, the event parameter can be omitted
Click(event: Event) {
    this.renderer.setElementStyle(elem.nativeElement, 'color', 'red');
}