角度指令

Question

有没有人使用装饰器创建任何样本Angular Directive？我搜索了很多,但是到目前为止所有的开发人员都创建了组件指令.即使是Angular API Review也没有更多关于此的内容.@Directive

Answer 1

简单指令演示.这是一个从angular2指令开始的非常简单的示例.

我有一个组件和指令.

我使用指令来更新组件的视图.而且,使用组件的changeColor函数调用指令的changeColor函数.

零件

@Component({
  selector: 'my-app',
  host: {'[style.backgroundColor]':'color',}
  template: `
      <input type="text" [(ngModel)]="color" (blur)="changeColor(color)" />
      <br>
      <span > (span) I'm {{color}} color <span>
      <div mySelectedColor [selectedColor]="color"> (div) I'm {{color}} color </div>
    `,
    directives: [selectedColorDirective]
})

export class AppComponent implements AfterViewInit{
  @ViewChild(selectedColorDirective) myDirective: selectedColorDirective;
  color:string;
  constructor(el:ElementRef,renderer:Renderer) {
    this.color="Yellow";
    //renderer.setElementStyle(el, 'backgroundColor', this.color);
  }
  changeColor(color)
  {
    this.myDirective.changeColor(this.color);
  }
  ngAfterViewInit() { }
 }

指示

@Directive({

  selector:"[mySelectedColor]", 
    host: {
   // '(keyup)': 'changeColor()',
   // '[style.color]': 'selectedColor',
  }

  })

  export class selectedColorDirective { 

    @Input() selectedColor: string = ''; 

    constructor(el: ElementRef, renderer: Renderer) {
      this.el=el;
        this.el.nativeElement.style.backgroundColor = 'pink'; 
      // renderer.setElementStyle(el, 'backgroundColor', this.selectedColor);
    } 

    changeColor(clr)
    {
     console.log('changeColor called ' + clr);
     //console.log(this.el.nativeElement);
     this.el.nativeElement.style.backgroundColor = clr;
     }

 }

Answer 2

在简单术语中, 组件指令将是您的模板指令,我们在构建应用程序时使用了很多 - >在您的html中 - ><custom-tag></custom-tag>

@Component({
selector : 'custom-tag',
template : '<p> My Custom Tag</p>'
})

结构指令是通过删除添加元素来修改DOM的结构指令.例子是

<div *ngIf="showErrorMessage">{{errorMessage}}</div>

ngIf会添加div,如果为true,则删除if,如果它变为false.

最后是属性指令,名称说明了所有......基于'属性的指令'示例将是:

<input type="text" pPassword />

@Directive({
    selector: '[pPassword]'
})

Answer 3

Angular指令有三种:

Components
Attribute directives
Structural directives

Angular2指南属性指令代码:https://github.com/guyoung/GyPractice-Angular2/tree/master/apps/attribute-directives

Angular2指南结构指令代码:https://github.com/guyoung/GyPractice-Angular2/tree/master/apps/structural-directives