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

我认为这会起作用。

点击以下链接： var str = "abcd"; var regex = /b/; console.log(str.replace(regex, "$$'"))

有关更多详细信息，请参见以下示例：

https://angular.io/api/common/NgClass而不是[ngClass]=...。

*ngClass仅适用于结构指令的简写语法，例如，您可以在其中使用

代替更长的等效版本

<div *ngFor="let item of items">{{item}}</div>

另请参阅https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

<template ngFor let-item [ngForOf]="items">
  <div>{{item}}</div>
</template>

另请参阅https://angular.io/docs/ts/latest/guide/template-syntax.html

<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

Answer 3

您可以检查所有概念

按照ling以下：

https://blog.angular-university.io/angular-ngclass-ngstyle/

Answer 4

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

如果要更改所有单击的链接的颜色，而不仅仅是最后一个，请建议使用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 5

您可以为此问题使用[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"}]

如何在angular6中应用样式

5 个答案: