时间戳

首页 > 解决方案 > 我应该为 Angular 5 中的 HTML 中的每个元素编写属性指令吗？

angular - 我应该为 Angular 5 中的 HTML 中的每个元素编写属性指令吗？

问题描述

所以，我只是在学习 Angular (5) 中的属性指令以及如何使用它们来改变 DOM 元素的外观，而不是在组件本身中，因为我们不应该在那里访问 nativeElement。

问题是：

1) 我应该为我的 HTML 表单中的每个元素编写一个属性指令吗？意思是，一个指令包含我想为每个元素对该元素进行的所有更改（颜色更改、字体大小等）。

2）..或者我应该根据动作写它们？例如，changeColorDirective可以应用于多个元素的 a。

我需要这方面的帮助，因为我真的找不到关于这个主题的详尽教程（如果有人知道我在哪里可以找到，我将不胜感激：D）。

非常感谢！

标签： angularangular-directive

解决方案

属性指令可以接受输入，类似于组件。例如，假设我们想要增强Angular 文档中的属性指令以删除硬编码的背景颜色“黄色”，并为开发人员提供一个选项来设置她自己选择的颜色。

文档中的 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()，比如 name 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 属性，但可能还有其他用途。

推荐阅读