Угловой селектор CSS для пользовательской директивы с необязательным атрибутом - PullRequest
Новая
       34

Угловой селектор CSS для пользовательской директивы с необязательным атрибутом

1 голос
/ 27 июня 2019

Допустим, я создал пользовательскую директиву с селектором [myCustomDirective], эта директива имеет необязательный входной параметр. Так что это может быть использовано как: 

<div myCustomDirective></div>

или 

<div [myCustomDirective]="someBooleanFromController"></div>

Между тем, внутри моего контроллера директив я добавляю псевдокласс к elementRef, к которому применяется директива.

Мой вопрос заключается в том, как должен выглядеть мой css-селектор для директивы, независимо от того, предоставляю ли я необязательный атрибут для директивы или нет. Я пытался использовать селектор так: 

[myCustomDirective]:pseudoClassName { 
   // ... some css
}

Это помогло, когда myCustomDirective используется без параметра, но не работает в случаях, когда параметр предоставлен для myCustomDirective.

Я тоже попробовал селектор вот так: 

[myCustomDirective="true"]:pseudoClassName { 
   // ... some css
}

Но это не сработало

1 Ответ

0 голосов
/ 27 июня 2019

Попробуйте следующий код:

HTML

app.component.html 

<p [appBetterHighlight]="'Yellow'">Highlight with App better directive</p>

CSS

style.css 

 p[ng-reflect-app-better-highlight] {
    color: blue !important;
 }

Вот как HTML интерпретируется в браузере 

<p _ngcontent-c4="" ng-reflect-app-better-highlight="Yellow" style="">Highlight with 
 App better directive</p>

Лучший способ добавить CSS к определенной пользовательской директиве, чтобы получить к нему доступ в CSS, как показано ниже: 

p[ng-reflect-{custom directive name}] { 
    // css here
}

демонстрация стекаблиц

...