如何在angular6中应用样式

Question

我希望点击预期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"}]

控制器 -

私人名称；

this.routes.params.subscribe((params)=>{
      this.data=params['id'];
      console.log(this.data);
    })  

this.Service.getAllItems().subscribe((data)=>{
   this.items=data;
   for(let i of this.items){
   if(i.id == this.data){
   this.name=i.title;
}
}

对于点击的ID，我必须将文本颜色设置为红色。如何应用。请帮助

Answer 1

您可能有一个带有活动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>

apply-color这是您想要的颜色的类

Answer 2

此答案适合于需要突出显示所有单击的选项的情况

如果要更改所有单击的链接的颜色，而不仅仅是最后一个，请建议使用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:visited的CSS样式适合您（而不是自己尝试），那将是最好的解决方案

Answer 3

您可以为此问题使用[ngClass]。 单击链接时，将项目传递给功能。 这将更改activeId。 通过使用[ngClass]，该类将应用于链接。

 let activeId:number; makeALinkActive(item){ this.activeId = item.id; } items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}] 

 .red{ color: red; } 

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

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