文档章节

ionic2 自定义指令

own1991
 own1991
发布于 2017/09/05 17:31
字数 227
阅读 20
收藏 0

一个很好的方法是使用指令。我认为指令组件之间的区别在概念上很难理解。我听说过的最好的方法是,当你想修改一个现有的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>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: box-shadow 阴影
下一篇: 谈$watch()
own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
理解ionic2 + angular2开发方案

  看了下ionic2的官方文档,做了简单的分析理解。 1. 安装使用   ionic2的安装运行基本和前版本的ionic基本一致,非常简单。 当然这里需要保证你的开发环境SDK已经安装成功了,例如Andro...

ouven
2016/09/20
1K
0
ionic2+angular2中踩的那些坑

好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路。 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学...

jason_wu_2
2016/11/04
193
0
ion-alpha-scroll 城市选择插件

先给出链接 https://github.com/rossmartin/ionic2-alpha-scroll 单问题来了,中文咋办?格式咋办? 很简单 首先安装插件 npm install ionic2-alpha-scroll --save 修改插件 注释部分代码 注...

凌风大师兄
03/27
0
0
ionic2 调用自定义插件之研究

cordova机制我在此就不提了,我们使用Typescript调用cordova plugin就如同调用第三方库是一个道理,那么这里就少不了书写declare文件,下面我就把几种封装调用的几种方式介绍一下。 方式一,...

赵_俊明
2016/09/05
2.1K
7
(1)ionic2的新特性

ionic2的新特性 ionic2是基于Angular2构建的.相对与ng1,ng2几乎是完全的推倒重建的新框架. 虽然Angular原有的部分仍然在新版本中得以保留,但是开发者必须注意那些新的语法和结构变化.你可以通...

boogoogle
2015/11/27
3.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 安装PHP5和PHP7

安装PHP5 下载解压二进制包 [root@test-a src]# cd /usr/local/src/[root@test-a src]# wget http://cn2.php.net/distributions/php-5.6.32.tar.bz2[root@test-a src]# tar jxvf php-5.6......

野雪球
52分钟前
3
0
windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部