Класс элемента запроса по директиве Angular 2

Я новичок в Angular 2, и я хочу написать директиву атрибута, который запрашивает элемент, который ищет класс 'class1', если он найден, тогда он должен заменить 'class1' на 'class2' ,Класс элемента запроса по директиве Angular 2

Должно выглядеть так:

import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; 

@Directive({ 
    selector: '[my-directive]' 
}) 
export class MyDirective { 
    constructor(el: ElementRef, renderer: Renderer) { 
    //Pseudo-code 
    if (el.containsClass('class1')) { 
     el.removeClass('class1'); 
     el.addClass('class2'); 
    } 
    } 
}

Cant найти соответствующую документацию, поэтому решил написать этот вопрос.

источник

2016-01-12 Marcos J.C Kichel

Вашего лучшим вариант будет писать директиву, который запрашивает для .class1. Затем host класс class2, а затем с помощью Renderer удалите исходный класс. Вот пример

@Directive({ 
    selector : '.class1', 
    host : { 
    'class' : 'class2' // The element will host 'class2' 
    } 
}) 
class MyDirective { 
    constructor(renderer: Renderer, elementRef: ElementRef) { 

    // The third argument is false which will remove the class 
    renderer.setElementClass(elementRef.nativeElement, 'class1', false); 
    } 
}

Update

Это может быть даже проще, оценивая class1 к нулю. Таким образом, мы можем избавиться от Renderer и ElementRef.

@Directive({ 
    selector : '.class1', 
    host : { 
    '[class.class2]' : 'true', // Set to 'true' to add the class 
    '[class.class1]' : 'null' // Set to 'null' to remove the class 
    } 
}) 
class MyDirective {}

Примечание Оценка класс/атрибут/свойство нуль удаляет его.

Вот plnkr с примером работы.

источник

2016-01-12 13:27:40

Можете ли вы объяснить более подробно, почему вы принимаете этот класс? –

Это всего лишь способ сделать это. Лично я предпочитаю использовать компонент для такого рода вещей. Вы можете добавить его и с Renderer. –

Хорошо спасибо, что решила мою проблему –

Вы можете попробовать это:

@Directive({ 
    selector: '[test]', 
    export class MytDirective { 
    constructor(el: ElementRef, renderer: Renderer) { 
     var classNameStr = el.nativeElement.className; 
     if (/someclass/.test(classNameStr)) { 
     renderer.setElementClass(el.nativeElement, 'someclass', false); 
     renderer.setElementClass(el.nativeElement, 'otherclass', true); 
     } 
    } 
    } 
})

В самом деле, атрибут nativeElement соответствует элементу DOM директива применяется на. См. Эту ссылку: https://developer.mozilla.org/en-US/docs/Web/API/Element.

API для класса Renderer описан здесь: https://angular.io/docs/ts/latest/api/core/Renderer-class.html.

Надеется, что это помогает вам, Thierry

источник

2016-01-12 13:13:33

Класс элемента запроса по директиве Angular 2

ответ

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