活动公告当前位置:帝豪2娱乐 > 活动公告 > >

Angular2利用组件与指令实现图片轮播组件

  

[angular指令编写组件,angularjs实现轮播图,angular,组件]Angular2利用组件与指令实现图片轮播组件

  

前言  

  

如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图。

  
  

  

而除了直接看的见的躯体之外,一个完整的“生物”还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情。

  
  本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个“器官”,功能是呈现图片,并感知用户的点击或手势来切换图片。

  

  

一、创建组件  

  

结束上文打的尴尬的比方,着眼于一个待开发的ng2项目,它有一个空白的特性页面,现在需要在上面呈现一个图片轮播窗口。

  

  

图片轮播是一个需要给用户看见的东西,所以应该使用ng2的组件(Component)来实现它,并且这个功能较为通用,可以将其独立出来方便以后再次使用到。

  

  

所以在项目中的共享模块(SharedModule)下创建这个组件名为 slide-img.component

  

  

使用ng2提供的组建装饰器来将这个TypeScript模块正式变身成ng2的组件:  

  
  
  @Component({  selector: 'my-slide-img',  templateUrl: 'slide-img.component.html',  styleUrls: ['slide-img.component.css'],  animations: [  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', 'transform': 'translateX(0)'})),  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即组件关联的界面的模板,  

  

  styleUrls即仅在此组件内生效的样式表,  

  

  animations定义的是一套ng2动画规则。

  

  

讲讲最后的这个动画规则:  

  

ng2的动画其实非常简单,步骤为1.定义触发器名,2.定义状态,3.定义切换样式,4.将此触发器应用到具体的标签中,状态作为触发器的值传入。

  

  

当ng2检测到动画状态的值更改了,就会套用定义的切换样式,用法思路还算比较明确(当然实际使用时会有一些尴尬的小问题)  

  

二、实现组件  

  

既然是轮播图片组件,要做的事情首先就得是传入轮播图片然后显示出来。

  

  

使用过ng1的朋友一定还记得其在定义指令(angular.directive)的时候是通过scope参数(或者link)来传入数据的,而ng2中使用的是Input装饰器,使用的方法如下:  

  
  
  @Input() public imgs: SlideImg[];
  
  

使用了此装饰器的变量imgs将可以在运行时接收其他组件传入的图片列表。使用方法如下:  

  
  
  
  
  

关于这里的方括号“[]”,ng2其实提供了多种方式来进行组件模板中值的传入,其中这种变量名用方括号包起来的方法就是其中之一,代表是输入的值,而后面会见到的圆括号来包围的方式,是代表输出的值。

  

  

传入了数据后,下一步就是要如何来显示图片到界面上了,没错就是ng1中ng-for指令的升级版*ngFor,除了写法外表面上的差别不大。

  

  

关于轮播图片逻辑的具体实现逻辑,笔者使用的方式就是利用ng2动画的状态切换,设置一个当前图片索引值current,*ngFor渲染的图片将其索引与当前索引比较,如果是相邻的图片则设为'prev'状态与'next'状态,ng2会为其加上位置属性为-100%或者100%,如果是当前图片则设为'on'状态,ng2会将其的位置属性设为0,其余均设为'off'状态,ng2会直接将其隐藏,实现的逻辑很简单,考虑也不算周全,笔者就不继续解释献丑了。 (责任编辑:admin)

上一篇:Jquery中find与each方法用法实例

下一篇:没有了

推荐内容