高级 Angular 组件模式 (1)

写在前头

Angular到现在已经到5.x的版本了,对于MVVM框架我首先接触的是angularjs后来又转为react,之后换了工作因项目技术栈的原因又转换到之前的angularjs,在实际工作中实施了公司几个比较重要项目中前端的重构工作,这个过程逐步意识到,对于MVVM框架本身,在使用层面讲,掌握一些通用的模式是很有必要的,尤其现在已经很流行的组件化开发。这样我们在实际工作中就可以无缝(或者花很少的时间成本)转化到任何的MVVM框架,并把节省下来的时间去学习新的知识。

最近一直在关注Angular In Depth的博客,偶尔看到这个系列的文章,觉的质量还挺高,所以抽空余时间翻译并分享给大家,并在每个文章后面加了一点自己的拙见,希望可以达到抛砖引玉的效果,如果观点有误,还望各位看官轻喷。

01 Build a Toggle Component

原文: Build a Toggle Component

Kent C. Dodds Advanced React Component Patterns那样,我们将使用一个相对简单的<toggle>组件来说明这些模式。<toggole>组件的职责是仅仅是管理一个简单的布尔值状态属性: on。使用如此简单的组件进行说明的目的,是因为我们可以将更多的注意力投入到相对组件本身而言较复杂的模式中。

经过这一系列文章,我将提供包含完整功能的、可运行的演示代码链接。你仅仅需要将注意力集中到app文件夹和toggle文件夹。toggle文件夹包含一些可复用的库(一系列组件),当然这个库会随着文章的深入而改变。app文件夹并且特别是app.component.html,将针对库在不同的情形下的使用做出相应的改变。

我们将从最原始的toggle组件版本开始。它仅仅有一个使用了@Input()装饰器的on属性,这个属性所控制的状态代表组件本身的开关状态,同时它还有一个是使用了@Output()装饰器的toggle事件发射器,这个事件发射器会在组件开关状态改变的情况下,通知父组件。

在我们开始下一个话题02 Write Compound Components之前,可以在在线代码仓库看看这个组件的实现以及演示。

译者注

toggle组件的实现是一个很典型的利用单向数据流作为数据源的简单组件:

  • on是单向数据源,同时代表组件内部的开关状态
  • toggle`是事件发射器`,以回调的方式将on状态的变化传递给父组件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

WEB免费打印控件推荐

要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1、2W之间,这就麻烦了。

4.6K10
来自专栏求索之路

教你用android玩冲顶大会——实现几个小时的财务自由

最近答题类app比较火,玩了几把之后想到为什么不用技术来查找答案呢?因此搞了一款辅助app,能够帮助大家直接搜索答案.经过两天的开发和三天的测试,终于让我的冲...

33360
来自专栏黑白安全

星号(*)密码查看

本文仅代表作者观点,不代表黑白网立场。 如文章侵犯了您的权利,请通过邮箱联系我们删除 E-Mail:server@heibai.org 黑白网官群:238921...

19220
来自专栏诸葛青云的专栏

微信跳一跳脚本重出江湖,python实现安卓&iOS自动版与手动版!

前面一段时间在GitHub上看到有人利用Python玩一款名为“跳一跳”的微信小程序,于是打算自己也来试一试,毕竟这款小游戏最近吸引了众多人的目光。

19200
来自专栏守候书阁

web调试优化-chrome开发者工具不完全指南

chrome,对于web开发者而言,都是很熟悉的一个浏览器,无论是从事的是前端,后端或者是测试!简单、快捷和功能强大使它受到了许多开发者的青睐!在浏览器排行上,...

8310
来自专栏机器学习算法与Python学习

极力推荐的Chrome插件!

Momentum能给单调的Chorme首页披上一个漂亮的风景照,毕竟谷歌浏览器的页面打开是这样的。

15800
来自专栏伪君子的梦呓

不用 ps 都可以获得双色调图片

17260
来自专栏木子昭的博客

Chrome与vim双神器融合, vimium完全攻略

77740
来自专栏较真的前端

饿了么的 PWA 升级实践

37340
来自专栏田云专栏

数据流方案的思考

近两年前端开发从jquery演化到了谈必及react vue ,大部分人已经习惯了

28430

扫码关注云+社区

领取腾讯云代金券