Проверьте и добавьте класс для вкладок Angular2

У меня есть MDL стилизованные вкладки в моем приложении Angular2. И мне нужно проверить, имеет ли вкладка класс, и если он не добавляет этот класс при щелчке.Проверьте и добавьте класс для вкладок Angular2

Мой component.html:

<div class="releases-list-component"> 

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 

    <div class="mdl-tabs__tab-bar"> 
     <a routerLink="albums" class="mdl-tabs__tab" (click)="addClass()">Albums</a> 
     <a routerLink="splits" class="mdl-tabs__tab" (click)="addClass()">Splits</a> 
     <a routerLink="tributes" class="mdl-tabs__tab" (click)="addClass()">Tributes</a> 
    </div> 

</div> 

<router-outlet></router-outlet>

Мои component.ts:

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

@Component({ 
    selector: 'releases-details', 
    templateUrl: 'app/releases/releases-details.component.html' 
}) 

export class ReleasesDetailsComponent { 

    className: string = ""; 

    addClass(){ 
     //??? this.hasClass("is-active")?this.removeClass("is-active"):this.addClass("is-active"); 
    } 

}

Посмотрите на комментарий выше внутри addClass функции.

источник

2016-12-03 Alexandr Belov

Вы хотите выделить текущую активную вкладку? – micronyks

Вы должны принять преимущество routerLinkActive директивы, если вы используете Angular2 маршрутизатор. Router сам добавляет и удаляет is-active класс, основанный на текущем активном маршруте. И если вы его используете, вам больше не нужно использовать событие click.

<div class="mdl-tabs__tab-bar"> 
     <a routerLink="albums" routerLinkActive="is-active" class="mdl-tabs__tab">Albums</a> 
     <a routerLink="splits" routerLinkActive="is-active" class="mdl-tabs__tab" >Splits</a> 
     <a routerLink="tributes" routerLinkActive="is-active" class="mdl-tabs__tab" >Tributes</a> 
    </div>

источник

2016-12-03 10:41:03 micronyks

Кажется, это то, что мне нужно. Но еще одна проблема заключается в том, что класс «is-active» применяется в кодовом щелчке (я просматривал вкладки в консоли Chrome), но нет «визуализации» стиля, который должен применяться, когда вкладка имеет класс «это-активный». Вы знаете, в чем проблема с этим? –

Не знаю, как правильно. Просто найдите правильный элемент и, надеюсь, визуализация стиля будет там. – micronyks

Я имел в виду, что в коде применяется стиль «активный», но визуально вкладка с этим стилем не оформляется, как предполагает этот стиль (стиль на 100% работает - проверен на других элементах в том же приложении). –

В зависимости от того, где вы хотите добавить класс на активных вы можете изменить его:

<div class="releases-list-component" [class.is-active]='isActive'> 


export class ReleasesDetailsComponent { 

    className: string = ""; 
    isActive = false; 
    addClass(){ 

     if(isActive){ 

      isActive = false 
     }else{ 

     isActive = true 

     } 
    } 

}

источник

2016-12-03 10:27:55 Milad

Проверьте и добавьте класс для вкладок Angular2

ответ

Смежные вопросы