分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Angular2组件与指令的小实践——实现一个图片轮播组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如果说模块系统是Angular2的灵魂，那其组件体系就是其躯体，在模块的支持下渲染出所有用户直接看得见的东西，一个项目最表层的东西就是组件呈现的视图。
而除了直接看的见的躯体之外，一个完整的“生物”还需要有感觉器官，用来感知外界与其的交互，这就是指令要做的事情。
本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的@L_616_7@轮播控件，继续上文打的比方的话这就像是一个“器官”，功能是呈现@L_616_7@，并感知用户的点击或手势来切换@L_616_7@。

一、创建组件

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

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

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

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

组件的声明
其参数其实已经不能再明确了：

　　　　　　SELEctor就是其使用时的标签名，

　　　　　　templateUrl即组件关联的界面的模板，

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

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

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

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

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

二、实现组件

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

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

@input() public imgs: SlideImg[];
使用了此装饰器的变量imgs将可以在运行时接收其他组件传入的@L_616_7@列表。使用方法如下：

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

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

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

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

slide-img.component.html
slide-img.component.css
slide-img.component.ts
其中有两个地方为讲到，一个是组件代码引入了一个slide-img.interface 模块，这个仅仅用来规范一下轮播@L_616_7@的格式，二是在html中还有一个节点名为(mySwipE)这就是接下来要讲的输出属性，目前知道的它的作用是，当用户滑动@L_616_7@时，将触发此节点配置的回调方法，所做的事情就是判断发生了左滑事件还是右滑事件，分别触发上一张图或下一张图的切换。

三、给轮播@L_616_7@控件加上手势效果

轮播@L_616_7@在移动端很需要加上手势滑动的效果，所以接下来要给这个轮播组件加上一个指令，用于响应用户的滑动手势。代码如下：

swipe.directive.ts
指令的声明甚至简单过组建的声明，因为指令不需要依赖于某个视图模板，只需要有个指令名称就足够了。

需要关心的是指令中定义的输出属性：

此属性接收了上文组件中的Change($event)回调方法，在此指令中，所做的事情就是监听组件的滑动，收到滑动事件后就触发这个回调，监听使用的是ng2的HostListener装饰器，用法显而易见了。

现在运行起项目来看看效果吧(比较懒就不截动图了)：

总结以及题外话：

本文主要使用了ng2几个比较基本的功能——输入属性(Input装饰器)、输出属性(Outut装饰器)、HostListener装饰器、几个系统指令(ngFor)、ng2动画实现了一个比较基本的@L_616_7@轮播控件。

使用好ng2的组件以及指令能完成很多的事情，其需要学习的东西绝不仅限与本文提到的，包括其底层的渲染，也很值得去研究。

最后提一个尴尬的问题点：

其实最初写这个轮播@L_616_7@的时候想过要加上拖动的，也就是@L_616_7@会随手势的滑动实时更新位置。

大佬总结

以上是大佬教程为你收集整理的Angular2组件与指令的小实践——实现一个图片轮播组件全部内容，希望文章能够帮你解决Angular2组件与指令的小实践——实现一个图片轮播组件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：一个图片实现实践指令播组件轮

上一篇: Angular开发者指南（二）概念概述下一篇:Angular开发者指南（四）控制器

猜你在找的Angularjs相关文章

Angularjs基础(八) 2022-04-20
angularjs – 在IE9中使用Angular 2需要什么？ 2019-10-10
angularjs – $http从服务到控制器的POST响应 2019-10-10
如何使用Typescript在Angular 2中创建TreeView？ 2019-10-10
angularjs – 尝试基于常量在控制器中动态设置templateUrl 2019-10-10
angular – 在app.component.ts中导入HTTP_PROVIDERS 2019-10-10
如何使用Observable初始化Reactive Angular2表单？ 2019-10-10
angular – 使用ng2-smart-table编辑和创建 2019-10-10
angularjs – 角度组件绑定未定义 2019-10-10
angularjs – 在ui.router中只更改状态更改的一个视图？ 2019-10-10