Angular2组件与指令的小实践——实现一个图片轮播组件
|
一、创建组件
selector: 'my-slide-img' templateUrl: 'slide-img.component.html' styleUrls: ['slide-img.component.css' trigger('imgMove'
state('off',style({'display': 'none','z-index': '0','transform': 'translateX(0)'
state('prev',style({'z-index': '1' 'transform': 'translateX(-100%)'
state('next',style({'z-index': '2','transform': 'translateX(100%)'
state('on',style({'z-index': '3', transition('prev=>on' animate('0.3s ease-in' transition('next=>on' animate('0.3s ease-in' transition('on=>prev' animate('0.3s ease-in' transition('on=>next' animate('0.3s ease-in' export class SlideImgComponent { }
其参数其实已经不能再明确了： selector就是其使用时的标签名， templateUrl即组件关联的界面的模板， 即仅在此组件内生效的样式表， 定义的是一套ng2动画规则。 讲讲最后的这个动画规则： ng2的动画其实非常简单，步骤为，，，。 当ng2检测到动画状态的值更改了，就会套用定义的切换样式，用法思路还算比较明确(当然实际使用时会有一些尴尬的小问题) 二、实现组件 既然是轮播图片组件，要做的事情首先就得是传入轮播图片然后显示出来。 使用过ng1的朋友一定还记得其在定义指令(angular.directive)的时候是通过scope参数(或者link)来传入数据的，而ng2中使用的是Input装饰器，使用的方法如下： @Input() public imgs: SlideImg[];
使用了此装饰器的变量imgs将可以在运行时接收其他组件传入的图片列表。使用方法如下： 关于这里的方括号“[]”，ng2其实提供了多种方式来进行组件模板中值的传入，其中这种变量名用方括号包起来的方法就是其中之一，代表是输入的值，而后面会见到的圆括号来包围的方式，是代表输出的值。 传入了数据后，下一步就是要如何来显示图片到界面上了，没错就是ng1中ng-for指令的升级版 ，*ngFor渲染的图片将其索引与当前索引比较，如果是相邻的图片则设为'prev'状态与'next'状态，ng2会为其加上位置属性为-100%或者100%，如果是当前图片则设为'on'状态，ng2会将其的位置属性设为0，其余均设为'off'状态，ng2会直接将其隐藏，实现的逻辑很简单，考虑也不算周全，笔者就不继续解释献丑了。
Prev
Next
{
:;:;:;
:;
}
{
:;
:;
:;
:;
:;
}
{
:;
:;:;:;
:;:;
:;:;:;
}
{
:;
:;
}
} from '@angular/core' import { SlideImg } from './slide-img.interface'
selector: 'my-slide-img' templateUrl: 'slide-img.component.html' styleUrls: ['slide-img.component.css' trigger('imgMove'
state('off',
state('prev', 'transform': 'translateX(-100%)'
state('next',
state('on', transition('prev=>on' animate('0.3s ease-in' transition('next=>on' animate('0.3s ease-in' transition('on=>prev' animate('0.3s ease-in' transition('on=>next' animate('0.3s ease-in' .current = 0 (.imgs && (.current === 0 index === 0 ? 'on' index === 1 ? 'next' index === .imgs.length - 1 ? 'prev' 'off' } (.current === .imgs.length - 1 index === .imgs.length - 1 ? 'on' index === .imgs.length - 2 ? 'prev' index === 0 ? 'next' 'off' (index - 0 'on' 1 'next' -1 'prev' 'off' } 'off' .current = (.current + 1) % .current = .current - 1 < 0 ? .imgs.length - 1 : .current - 1
(e === 'left' } (e === 'right' }
其中有两个地方为讲到，一个是组件代码引入了一个?模块，这个仅仅用来规范一下轮播图片的格式，二是在html中还有一个节点名为
import { Directive,HostListener,Output,EventEmitter } from '@angular/core'
@Directive({ selector: '[mySwipe]' @Output() public mySwipe = EventEmitter
指令的声明甚至简单过组建的声明，因为指令不需要依赖于某个视图模板，只需要有个指令名称就足够了。 需要关心的是指令中定义的输出属性： @Output() public mySwipe = EventEmitter
此属性接收了上文组件中的Change($event)回调方法，在此指令中，所做的事情就是监听组件的滑动，收到滑动事件后就触发这个回调，监听使用的是ng2的HostListener装饰器，用法显而易见了。 现在运行起项目来看看效果吧(比较懒就不截动图了)：
总结以及题外话： 本文主要使用了ng2几个比较基本的功能——输入属性(Input装饰器)、输出属性(Outut装饰器)、HostListener装饰器、几个系统指令(ngFor)、ng2动画实现了一个比较基本的图片轮播控件。 使用好ng2的组件以及指令能完成很多的事情，其需要学习的东西绝不仅限与本文提到的，包括其底层的渲染，也很值得去研究。 最后提一个尴尬的问题点： 其实最初写这个轮播图片的时候想过要加上拖动的，也就是图片会随手势的滑动实时更新位置。 但后来发现ng2的动画有个尴尬的地方，那就是一定会从初始状态按照定义好的转换效果变化到目标状态。实时滑动需要我在滑动过程中就改变图片的位置，这样的话在滑动结束需要切换图片时，图片居然强行回到了初始位置然后才开始转换动画，一时还想不到继续使用ng2动画来实现这种实时滑动的完美解决办法，实在是尴尬。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
