Angular @HostBinding, простой пример и основы - PullRequest
Новая
       23

Angular @HostBinding, простой пример и основы

0 голосов
/ 12 ноября 2018

Я бы очень хорошо понял концепцию Angular @HostBinding. К сожалению, моя книга очень хорошая, но эта концепция не очень ясно объяснена.

Смотри пожалуйста код: 

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.css']
})
export class TestComponentComponent implements OnInit {

  @Input() dataModel:AppModel;
  @HostBinding('attr.class') cssClass = 'alfa';

  constructor() { 

(...)

Мое личное объяснение: «привязка к хосту позволяет установить что-либо в элементе хоста (в данном случае тег app-test-component) внутри самого компонента (другими словами, из этого файла, который я упоминал ниже); в этом случае я установил атрибут класса этого тега в переменную с именем cssClass и с атрибутом 'alfa' ". Это правильно?

В этом случае, если я определил стиль 'alfa' в соответствующем css-файле, почему я не вижу этот стиль (например, цвет фона или что-то еще) на странице, где отображается мой компонент?

Большое спасибо!

РЕДАКТИРОВАТЬ: Мне нужно очень хорошо понять строку 

@HostBinding('attr.class') cssClass = 'alfa';

Не могли бы вы подтвердить, что это в точности эквивалентно "установить атрибут класса элемента шаблона в строку cssClass, присвоенную значению 'alfa'"? (или, другими словами, это то же самое, что инструкция "class = 'alfa'" в основном теге шаблона)

И, пожалуйста, напишите мне также пример с тем же результатом, но без использования @hostbinding? Я уверен, что сравнение двух эквивалентных решений в сравнении может быть очень полезным для меня.

Большое спасибо за ваше терпение!

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

В Angular декоратор функции @HostBinding () позволяет вам установить свойства элемента хоста из класса директивы.

Допустим, вы хотите изменить свойства стиля, такие как высота, ширина, цвет, margin, border и т. д. или любые другие внутренние свойства элемента host в классе директивы.Здесь вам нужно использовать функцию декоратора @HostBinding (), чтобы получить доступ к этим свойствам в элементе хоста и присвоить ему значение в классе директивы.

Декоратор @HostBinding () принимает один параметр:имя свойства элемента хоста, значение которого мы хотим присвоить в директиве.

0 голосов
/ 12 ноября 2018

Функция псевдокласса: host () CSS выбирает теневой хост теневого DOM, содержащего CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент внутри его теневого DOM) - но только еслиселектор, заданный в качестве параметра функции, соответствует теневому хосту.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:host()

Попробуйте, это будет работать

component.css 

:host(.alfa){
  color: red;
}
...