Как применить стиль в angular6

Question

Я хочу применить цвет текста, когда ожидаемый идентификатор будет нажатЦвет текста красный. Как его применить. Пожалуйста, помогите

Answer 1

У вас может быть переменная с активным идентификатором, которая устанавливается при нажатии:

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

Вы можете [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"}]

Answer 3

Этот ответ удовлетворяет условию, когда нам нужно выделить все опции, по которым щелкнули

Если вы хотите изменить цвет всех ссылок, по которым щелкнули, а не только последнюю, я советую вам использовать директиву 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');
}

И если для вас работает только стиль CSS для a:visited (не пробовал сам), то это будет лучшим решением

Answer 4

Вы можете проверить всю концепцию на

, следуя инструкциям ниже:

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

Answer 5

Я думаю, что это будет работать.

Перейдите по ссылке ниже: https://angular.io/api/common/NgClass

Для получения более подробной информации см. Пример ниже:

[ngClass]=... вместо *ngClass.

* предназначен только для сокращенного синтаксиса для структурных директив, где вы можете, например, использовать

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

вместо более длинной эквивалентной версии

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

См. Такжеhttps://angular.io/docs/ts/latest/api/common/index/NgClass-directive.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>

См. Также https://angular.io/docs/ts/latest/guide/template-syntax.html

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

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>