高级 Angular 组件模式 (1)

Corwien 发布于2019-08-21 18:47 / 3047人阅读

摘要：原文如那样，我们将使用一个相对简单的组件来说明这些模式。组件的职责是仅仅是管理一个简单的布尔值状态属性。文件夹并且特别是，将针对库在不同的情形下的使用做出相应的改变。

写在前头

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那样，我们将使用一个相对简单的组件来说明这些模式。组件的职责是仅仅是管理一个简单的布尔值状态属性: on。使用如此简单的组件进行说明的目的，是因为我们可以将更多的注意力投入到相对组件本身而言较复杂的模式中。

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

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

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

在线代码演示（自备梯子）：https://stackblitz.com/edit/a...

译者注

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

on是单向数据源，同时代表组件内部的开关状态

toggle`是事件发射器`，以回调的方式将on``状态的变化传递给父组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90810.html

高级 Angular 组件模式 (6)

摘要：为了适应表单校验的灵活性，我们使用这种模式会事半功倍，提供校验信息的组件仅仅声明渲染表单错误提示信息需要设计的状态变量即可，比如等等，对于错误信息的文案及样式，统统交由错误提示组件的使用者完成。 06 Use Render Props最近在React社区中引起了轰动，但是与之类似的模式在Angular中似乎并没有得到太多关注。我在之前写的文章提及过，TemplateRefs就是Ang...

caohaoyu 2019-08-26 11:55 评论0 收藏0
高级 Angular 组件模式 (7)

摘要：目标提供一些方法或指令给组件使用者，使其可以与所提供的元素交互并修改它们。这个指令拥有一个属性并与组件共享，该属性将决定属性的值是还是。 07 使用 Content Directives 原文: Use Content Directives 因为父组件会提供所有相关的 UI 元素（比如这里的 button），所以 toggle 组件的开发者可能无法满足组件使用者的一些附加需求，比如，...

chadLi 2019-08-23 12:15 评论0 收藏0
高级 Angular 组件模式 (3a)

摘要：同时，依赖注入机制是依附于组件本身存在的，并不依附于模板的层级关系，因此不会面临问题二的困扰。对于木偶组件本身，往往作为消费者存在，这种情况下使用机制可能会达到更好的效果。 03-a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components Using Dep...

Chiclaim 2019-08-21 18:47 评论0 收藏0
高级 Vue 组件模式 (1)

摘要：写在前头去年，曾经阅读过一系列关于高级组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级组件模式的文章，碰巧最近接手了一个公司项目，前端这块的技术栈是。同时这个组件还拥有一个属性，用来初始化的状态值。写在前头去年，曾经阅读过一系列关于高级 react 组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级 angular 组件模式的文章，碰巧最近接手了一个公...

lanffy 2019-08-23 12:26 评论0 收藏0
高级 Angular 组件模式 (2)

摘要：相关话题装饰器将会返回在组件标签包含的内容中，第一个符合选择器的子组件或者子指令的引用，比如。或者装饰器是用来获取在组件内部模板中使用的单个或者多个组件的。 02 Write Compound Components 原文: Write Compound Components 目标我们需要实现的需求是能够使使用者通过组件动态的改变包含在它内部的内容。实现我们可以把toggle抽象...

Taste 2019-08-21 18:47 评论0 收藏0