Должен ли я написать директивы атрибутов для каждого элемента в HTML в Angular 5? - PullRequest
Новая
       5

Должен ли я написать директивы атрибутов для каждого элемента в HTML в Angular 5?

2 голосов
/ 17 января 2020

Итак, я только что узнал о директивах атрибутов в Angular (5) и о том, как их следует использовать для изменения внешнего вида элементов DOM, а не в самом компоненте, потому что мы не должны обращаться к nativeElement там.

Вопросы:

1) Должен ли я написать директиву атрибута для каждого элемента в моем листе HTML? То есть, одна Директива со всеми изменениями, которые я хочу внести для этого элемента (изменение цвета, размер шрифта и т. Д. c) для каждого элемента ..

2) .. Или я должен написать их в соответствии с действие? Например, changeColorDirective, который можно применить к нескольким элементам.

Мне нужна помощь с этим, так как я не могу найти подробное руководство по этому вопросу (я был бы признателен за некоторые указания, если кто-нибудь знает, где я могу найти что: D).

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

1 Ответ

0 голосов
/ 17 января 2020

Директивы атрибутов могут принимать входные данные, аналогично компонентам. Например, предположим, что мы хотим улучшить директиву атрибута из Angular docs , чтобы удалить жёстко заданный цвет фона «желтый» и предоставить разработчику возможность выбрать собственный цвет по своему выбору.

Angular Пример из документов: 

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Используется, как показано ниже: 

<p appHighlight>
  Highlight me!
</p>

Чтобы принять выбор пользователя для цвета, мы можем добавить @Input(), скажем, с именем highLightColor. Так как его значение доступно только в ngOnInit (или после этого перехватывает жизненный цикл), нам также придется переместить код, который обновил цвет фона элемента из конструктора, в метод ngOnInit, как показано ниже

Расширенный пример: 

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {

    @Input()
    highLightColor = 'yellow';

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
       this.el.nativeElement.style.backgroundColor = this.highLightColor;
    }
}

Будет использоваться, как показано ниже: 

<p appHighlight [highLightColor]="'red'">
  Highlight me!
</p>

Аналогично, вы можете добавить @Input(), если ваша директива имеет больше точек настройки. В реальной жизни вы не можете использовать его для обновления стандартных атрибутов HTML, но возможны и другие варианты.

...