[Angular Directive] 1. Write an Angular Directive

标签：text   exp   tac   str   style   change   last   direct   element   

Angular 2 Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.

import {Directive, HostBinding} from ‘@angular/core‘;

@Directive({
  selector: ‘[myText]‘
})
export class TextDirective {

  @HostBinding() innerText;
  constructor() {
    this.innerText = "I am text directive!"
  }
}

There are tow things important here:

• selector: ‘[myText]‘, this is an attr selector.
• HostBinding: Bind to host element‘s props.

If we using like this:

<div myText>I am a div</div>
<span>I am a span</span>
<hr>
<span myText>My text will be changed!</span>

This directive will change div and last span‘s innerText to ‘I am text directive!‘.

[Angular Directive] 1. Write an Angular Directive

标签：text   exp   tac   str   style   change   last   direct   element   

原文地址：http://www.cnblogs.com/Answer1215/p/6206203.html