Angular2如何使用组件与指令实现图片轮播组件

这篇文章主要介绍了Angular2如何使用组件与指令实现图片轮播组件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都假山制作小微创业公司专业提供成都定制网站营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

一、创建组件

结束上文打的尴尬的比方，着眼于一个待开发的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会直接将其隐藏，实现的逻辑很简单，考虑也不算周全，笔者就不继续解释献丑了。

最终的轮播图片组件及其模板文件代码如下：

.imgs{ position: relative;width: 100%;height: 15em; overflow: hidden; } .img{ position: absolute; width: 100%; height: 100%; background: pink; transition: 0.2s; } .btn{ display: inline-block; padding: 1em 2em;font-size: 1em;border-radius: 0.5em; border: 1px solid #ddd;cursor: pointer; margin: 1em;background: #eee;box-shadow: 0.1em 0.1em 0.2em #aaa; } .btn:active{ background: #eee; box-shadow: none; }

import { Component, OnInit, Input, animate, style, transition, trigger, state, HostListener } from '@angular/core'; import { SlideImg } from './slide-img.interface'; @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 { @Input() public imgs: SlideImg[]; public current; constructor() { this.current = 0; } public ImgState(index) { if (this.imgs && this.imgs.length) { if (this.current === 0) { return index === 0 ? 'on' : index === 1 ? 'next' : index === this.imgs.length - 1 ? 'prev' : 'off'; } else if (this.current === this.imgs.length - 1) { return index === this.imgs.length - 1 ? 'on' : index === this.imgs.length - 2 ? 'prev' : index === 0 ? 'next' : 'off'; } switch (index - this.current) { case 0: return 'on'; case 1: return 'next'; case -1: return 'prev'; default: return 'off'; } } else { return 'off'; } } public Next() { this.current = (this.current + 1) % this.imgs.length; } public Prev() { this.current = this.current - 1 < 0 ? this.imgs.length - 1 : this.current - 1; } public Change(e) { if (e === 'left') { this.Next(); } else if (e === 'right') { this.Prev(); } } }

import { Directive, Input, HostListener, Output, EventEmitter } from '@angular/core'; @Directive({ selector: '[mySwipe]' }) export class SwipeDirective { @Output() public mySwipe = new EventEmitter(); private touchStartX; private touchStartY; @HostListener('touchstart', ['$event']) public onTouchStart(e) { this.touchStartX = e.changedTouches[0].clientX; this.touchStartY = e.changedTouches[0].clientY; } @HostListener('touchend', ['$event']) public onTouchEnd(e) { let moveX = e.changedTouches[0].clientX - this.touchStartX; let moveY = e.changedTouches[0].clientY - this.touchStartY; if (Math.abs(moveY) < Math.abs(moveX)) { /** * Y轴移动小于X轴判定为横向滑动 */ if (moveX > 50) { this.mySwipe.emit('right'); } else if (moveX < -50) { this.mySwipe.emit('left'); } } else if (Math.abs(moveY) > Math.abs(moveX)) { /** * Y轴移动大于X轴判定为纵向滑动 */ if (moveY > 50) { this.mySwipe.emit('down'); } else if (moveY < -50) { this.mySwipe.emit('up'); } } this.touchStartX = this.touchStartY = -1; } }

大橙子网站建设，新征程启航

Angular2如何使用组件与指令实现图片轮播组件

其他资讯