标签：style pre button str cto imp return select exp
You can change behaviors of element and @Component properties based on services using @HostBinding in @Directives. This allows you to build @Directives which rely on services to change behavior without the @Component ever needing to know that the Service even exists.
import {Directive, HostBinding} from ‘@angular/core‘;
import {OnlineService} from "../services/online.service";
@Directive({
selector: ‘[online]‘
})
export class OnlineDirective {
constructor(private onlineService: OnlineService) { }
@HostBinding(‘style.color‘) get styleColor () {
return !this.onlineService.online ? ‘red‘: ‘unset‘;
}
@HostBinding(‘disabled‘) get disabled() {
return !this.onlineService.online;
}
}
import {Directive, HostBinding} from ‘@angular/core‘;
import {OnlineService} from "../services/online.service";
@Directive({
selector: ‘[online]‘
})
export class OnlineDirective {
constructor(private onlineService: OnlineService) { }
@HostBinding(‘style.color‘) get styleColor () {
return !this.onlineService.online ? ‘red‘: ‘unset‘;
}
@HostBinding(‘disabled‘) get disabled() {
return !this.onlineService.online;
}
}
<button online>One</button>
[Angular Directive] Combine HostBinding with Services in Angular 2 Directives
标签：style pre button str cto imp return select exp
原文地址：http://www.cnblogs.com/Answer1215/p/6212003.html
