Angular2 Стили в директиве

Question

В приведенных примерах директив атрибутов (т. Е. Директивы для добавления внешнего вида/поведения) мы имеем довольно простую настройку стиля для элемента-хозяина.

import {Directive, ElementRef } from 'angular2/core'; 
@Directive({ 
    selector: '[myHighlight]' 
}) 
export class HighlightDirective { 
    constructor(element) { 
     element.nativeElement.style.backgroundColor = 'yellow'; 
    } 

static get parameters(){ 
    return [[ElementRef]]; 
} 

Вместо того, чтобы устанавливать стиль, могу ли я использовать стили вместо этого? например

@Directive({ 
    selector: '[myHighlight]', 
    styles: [':host { background-color: yellow; }'] 
}) 

Это не работает для меня?

Я делаю что-то немного более сложное, что привело к большому количеству монолитного кода, установив множество стилей, используя AnimationBuilder и т. Д. И т. Д., Мне кажется, что было бы намного лучше разделить это на классы и анимации в CSS.

ViewEncapsulation = emulated/default, если это важно?

Answer 1

Вы можете использовать хост привязки для привязки к стилю атрибуты:

@Directive({ 
    selector: '[myHighlight]', 
    host: { 
     '[style.background-color]': '"yellow"', 
    } 
}) 

или

@Directive({ 
    selector: '[myHighlight]', 
}) 
class MyDirective { 
    @HostBinding('style.background-color') 
    backgroundColor:string = 'yellow'; 
} 

Answer 2

Я прочитал ваш комментарий ниже первого ответа. Я не знаю, как вы сможете применить свои 30 правил. But few ways are here- plunker.

selector:"[myHighlight]", 
    host: {   
    '(mouseenter)':'changeColor()', 
    '[style.background]': '"pink"', 
    '(click)':'clickMe()', 
    '(mouseout)':'changeColorOnOut()', 
    } 

Answer 3

Просто введите элемент, как обычно, используя селектор атрибутов. Создайте файл myHighlight.directive.scss (или любой другой) в той же папке, что и директивы и писать свои стили там:

[myhighlight] { 
    background-color: yellow; 
} 

Если ваше приложение не включает в свой файл стилей автоматически, просто импортировать его в главном файле стилей. Для меня в Ionic 2 он автоматически подбирался.

Если вы хотите использовать определенный класс вместо селектора атрибутов, используйте Renderer для добавления класса.

import {Directive, ElementRef, Renderer} from 'angular2/core'; 
@Directive({ 
    selector: '[myHighlight]' 
}) 
export class HighlightDirective { 
    constructor(private el: ElementRef, private renderer: Renderer) { 
     this.renderer.setElementClass(this.el.nativeElement, 'my-highlight', true); 
    } 
} 

Answer 4

В то время как другие ответы полезны в большинстве случаев, вы, кажется, нужен более традиционный CSS стилей подход, как у меня был случай использования для.

Проблема заключается в том, что по умолчанию у Angular используется эмуляция Shadow DOM, которая использует стили только внутри элемента хоста.

два вариант:

1)

Вы можете сказать, Угловой каскад ваших стилей вниз через все его потомок, используя :host /deep/ .some-style-to-cascade-down-like-normal {} или заменить /deep/ с >>>. См. Angular's Docs об этом.

три важные вещи, чтобы отметить:

• ViewEncapsulation должен быть (эмулировать) состояние его по умолчанию
• Угловое/хром являются протестующий оба эти синтаксисом, пока они работают на лучший подход
• Если у вас «повторно используя угловую CLI, вы должны использовать /deep/ вместо >>>

2)

Хотя вы лишитесь контекстным компонент инкапсуляции (если это имеет значение в вашем случае), здесь приведен пример использование «myHighlight» как директива хотя TypeScripted как компонент так что я могу импортировать таблицы стилей:

ПРИМЕНЕНИЕ:
<p myHighlight>Highlight me!</p>

TS (компонент рассматривается как директивы):

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

@Component({ 
    selector: 'p[myHighlight]', // Refer to it like an attribute directive 
    templateUrl: './my-highlight.component.html', 
    styleUrls: ['./my-highlight.component.scss'], 
    encapsulation: ViewEncapsulation.None // Tell Angular to not scope your styles 
}) 

Angular Material 2's Button использует этот же подход для решения этой проблемы.

И вот замечательная статья под названием All the Ways to Add CSS to Angular 2 Components, которая привела меня к этому осознанию и объясняет, как Angular рассматривает все три свойства ViewEncapsulation.

Answer 5

же, как @ m.spyratos, но с использованием Renderer2:

import { 
    Directive, 
    ElementRef, 
    OnInit, 
    Renderer2 
} from '@angular/core'; 

@Directive({ 
    selector: '[myButton]' 
}) 
export class MyButtonDirective implements OnInit { 
    constructor(
    private elementRef: ElementRef, 
    private renderer: Renderer2 
) { } 

    public ngOnInit(): void { 
    this.renderer.addClass(
     this.elementRef.nativeElement, 
     'my-button' 
    ); 
    } 
}