文档章节

ionic2 自定义指令

own1991
 own1991
发布于 2017/09/05 17:31
字数 227
阅读 18
收藏 0
点赞 0
评论 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>

 

© 著作权归作者所有

共有 人打赏支持
own1991
粉丝 0
博文 52
码字总数 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
ionic2 调用自定义插件之研究

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

赵_俊明
2016/09/05
2.1K
7
ion-alpha-scroll 城市选择插件

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

凌风大师兄
03/27
0
0
(1)ionic2的新特性

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

boogoogle
2015/11/27
3.8K
0
Ionic2:创建App启动页滑动欢迎界面

效果如下,图片来自网络 本文例子和上图稍有不同,主要功能如下: 每滑动一下展示一张全屏图片; 滑动到最后一页才出现启动按钮; 欢迎界面只在第一次安装启动时出现。 下面就让我们一步一步...

_飞哥
2016/10/29
5.5K
22
最新Angular2案例rebirth开源

在过去的几年时间里,Angular1.x显然是非常成功的。但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应。这些问题包括性能瓶颈、滞后于极速发展的Web标准、移动化多平台...

zting科技
2017/10/11
0
0
Ionic2仅main.js运行时间10s+,为什么呢

Ionic2仅main.js运行时间10s+,有谁遇到过吗?有优化方案吗? Crosswalk:这个插件使用后没有什么区别,还是10s+; 腾讯 x5 webview:集成进去没有啥用处; 很多人Blog上说优化代码,这玩意真...

时光青年依旧蓝-
2017/03/10
577
3
(3)ionic2-项目结构

进入我们刚建立的项目文件夹中,我们会发现这是一个典型的Cordova项目结构.在这里我们可以安装一些native插件,针对特殊平台创建不同的文件. 几乎所有跟我们的项目有关的文件都是在app文件夹下...

boogoogle
2015/12/01
2.8K
0
Hybrid App 和 React Native 开发那点事

简介:Hybrid App(混合模式移动应用)开发是指介于Web-app、Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开发的优势」。很多人都知道...

OneAPM蓝海讯通
2016/03/18
170
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

TextView设置行间距、字体间距

一、设置行间距 1、设置行间距:android:lineSpacingExtra,取值范围:正数、负数和0,正数表示增加相应的大小,负数表示减少相应的大小,0表示无变化 2、设置行间距的倍数:android:lineSpa...

王先森oO
10分钟前
0
0
适配器模式

适配器模式(Adapter):将一个类的接口转换成客户端希望的另外一个接口,适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 适配器用于连接两种不同种类的对象,使其毫...

阿元
10分钟前
0
0
CoreText进阶(四)-文字行数限制和显示更多

CoreText进阶(四)-文字行数限制和显示更多 用例和效果 Demo:CoreTextDemo 效果图: 默认的截断标识和自定义的截断标识符效果图  点击查看更多之后的效果图  为了可以设置显示的行数以...

aron1992
12分钟前
0
0
nginx的五种负载算法

nginx的五种负载算法 2017年04月26日 15:01:11 阅读数:1297 1.round robin(默认) 轮询方式,依次将请求分配到各个后台服务器中,默认的负载均衡方式。 适用于后台机器性能一致的情况。 挂...

linjin200
14分钟前
0
0
Android RecyclerView快速上手

RecyclerView mainMenu = findViewById(R.id.fragmentMain); mainMenu.setLayoutManager(new GridLayoutManager(getActivity(),4)); mainMenu.setAdapter(new MainAdapter......

燕归南
16分钟前
0
0
RabbitMQ实战:理解消息通信 

应用RabbitMQ的5种队列 一、简单队列 P:消息的生产者 C:消息的消费者 红色:队列 简单队列的生产者和消费者关系一对一 但有时我们的需求,需要一个生产者,对应多个消费者,那就可以采用第...

spinachgit
17分钟前
0
0
Linux的使用技巧:到底要不要会用?[图]

Linux的使用技巧:到底要不要会用?[图] 最近有个项目接近了尾声,要进入到调试测试阶段。这是一个使用Springboot框架为后台程序,mpvue构建的小程序项目。服务器我最终仍旧选择了Linux操作系...

原创小博客
19分钟前
0
0
记elasticdump 备份数据导出导入

版本: elasticsearch 5.5.2 elasticdump 2.2 系统 CentOS7.3 因项目需求 从生产导出一份索引到测试 帮助文档 https://github.com/taskrabbit/elasticsearch-dump?utm_source=dbweekly&utm_m......

雁南飞丶
20分钟前
0
0
saltstack配置目录管理

1.服务端配置 -接着编辑之前的 top.sls 文件 #vim /srv/salt/top.sls //修改为如下 base: 'slaver.test.com': - filedir -新建 filedir.sls 文件 # vim /srv/salt/filedir.sls file-dir: fi......

硅谷课堂
20分钟前
0
0
python日期时间

日期和时间 Python内建的datetime模块提供了datetime、date和time类型。datetime类型结合了date和time,是最常使用的: In [102]: from datetime import datetime, date, timeIn [103]:...

火力全開
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部