Directive ables to change component behaives and lookings. Directive can also export some APIs which enable behaivor changes control by outside directive iteslf.
For example, we have an tooltip:
It is a directive:
import { Input, Directive, ElementRef, OnInit } from ‘@angular/core‘;
@Directive({
selector: ‘[tooltip]‘,
exportAs: ‘tooltip‘
})
export class TooltipDirective implements OnInit {
tooltipElement = document.createElement(‘div‘);
@Input()
set tooltip(value) {
this.tooltipElement.innerText = value;
}
hide() {
this.tooltipElement.classList.remove(‘tooltip--active‘);
}
show() {
this.tooltipElement.classList.add(‘tooltip--active‘);
}
constructor(
private element: ElementRef
) {}
ngOnInit() {
this.tooltipElement.className = ‘tooltip‘;
this.element.nativeElement.appendChild(this.tooltipElement);
this.element.nativeElement.classList.add(‘tooltip-container‘);
}
}
This tooltip should be hidden by default.
We want to toggle show/hide by mouse over the ‘(?)‘ span:
So just export the directive:
@Directive({ selector: ‘[tooltip]‘, exportAs: ‘tooltip‘ })
The html:
<div> <label> Credit Card Number <input name="credit-card" type="text" placeholder="Enter your 16-digit card number" credit-card> </label> <label tooltip="3 digial only" #myTooltip="tooltip" > Enter your security code <span (mouseover)="myTooltip.show()" (mouseout)="myTooltip.hide()"> (?) </span> <input type="text"> </label> </div>
And html get use template ref to get the directive:
#myTooltip="tooltip"
Then we can control it in other place:
<span (mouseover)="myTooltip.show()" (mouseout)="myTooltip.hide()"> (?) </span>
[Angular] Export directive functionalities by using 'exportAs'
原文：http://www.cnblogs.com/Answer1215/p/6532826.html