ionic2 自定义指令
博客专区 > own1991 的博客 > 博客详情
ionic2 自定义指令
own1991 发表于3个月前
ionic2 自定义指令
  • 发表于 3个月前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

一个很好的方法是使用指令。我认为指令组件之间的区别在概念上很难理解。我听说过的最好的方法是,当你想修改一个现有的DOM(文档对象模型)元素的行为时,你会使用一个指令,当你想要一个全新的DOM元素时,你将创建一个组件。否则,组件指令几乎相同,组件只是一个带有自己的模板指令

创建 一个指令的命令   会创建一个directive文件夹
ionic g directive ElasticHeader

关于指令的引用

selector: '[set-color]' // Attribute selector

selector: 'set-color' // Element selector

一个含input的自定义指令:

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
  selector: '[set-color]' // Attribute selector
  //selector: 'set-color' // Attribute selector
})
export class SetColor {
   _defaultColor='pink';
  //参数 setter
  @Input('set-color') 
  set haoqihensuibianma (colorName:string) {
    this.setFontColor(colorName);
  };
  constructor(private el:ElementRef) {
    this.setFontColor(this._defaultColor);
  }

  setFontColor(color:string) {
      this.el.nativeElement.style.color=color;
  }
  
}
<ion-content>
<h1 set-color="#eee">
  {{title}}
</h1>
</ion-content>

 

共有 人打赏支持
粉丝 0
博文 49
码字总数 29269
×
own1991
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: