首页 > 代码库 > [Angular Directive] Combine HostBinding with Services in Angular 2 Directives
[Angular Directive] Combine HostBinding with Services in Angular 2 Directives
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。