Question

我很难识别我应该在什么时候

创建属性指令
意识到我需要创建属性指令
使用输入和输出属性

属性指令有什么需要？

我倾向于将所有逻辑都包含在一个组件中，我知道它的定义，但实际上，我找不到例子。

最佳做法是什么？

Answer 1

指令可用于操纵DOM元素。当你想制作一个可供团队或世界其他程序员使用的自定义（第三方）指令时，它非常有用。

基本上有三种类型的指令。

1）结构指令
2）属性指令
3）组件指令（带模板）

1） 结构指令 通常操纵视图/模板的结构。例如。 *ngFor 会根据您的列表计数生成元素。 *ngIf 会根据传递的值显示/隐藏视图。

<小时/> 2） 属性指令 允许您在DOM元素上添加属性，然后您可以使用该DOM元素执行许多操作。

< / p>

例如。

<p myColor >Color me!</p>    //<<< this helps you to grab DOM element using ElementRef and then I'll color it as shown below.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[myColor]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'red';  
  }
}

这里 myColor 只是 attribute directive ，因为它作为 attribute <添加到DOM元素中/ strong>但此属性尚未接受任何值。

现在让我们为 myColor 属性
添加一个值
<p [myColor]="color">Highlight me!</p>

<小时/> @Input ：我们在这里传递 color variable(Angular2 bindings) 所以在指令中我们必须有一个机制来接收它。所以我们应该使用 @Input API ，因为我们要从父组件中获取值（您可以将指令视为父项的子项） @Output ：如果您希望指令发出一些应由父组件接收的值，那么您应该使用 @Output API

属性指令的示例是什么

1 个答案: