高级 Angular 组件模式 (3a)

Chiclaim 发布于2019-08-21 18:47 / 1327人阅读

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

03-a Communicate Between Components Using Dependency Injection

原文: Communicate Between Components Using Dependency Injection

当前的组件仍然存在其他的问题，比如：

我们无法在其中方式多个或者是在同一个中

如果一个作为另外一个自定义组件的内容的话，我们无法是使用@ContentChild装饰器获取它

目标

我们需要将这两个问题作为新的目标：

我们可以增加多个相同类型的子组件(、、)

并且可以使这些子组件放置在任意的自定义容器的视图模板(views)中

实现

针对第一个问题，我们使用@ContentChildren装饰器（因为它获取所有的子组件引用），但是它无法解决第二个问题。

为了同时解决这两个问题，我们可以使用Angular提供的DI机制(dependency injection mechanism)。你可以将一个组件的祖先组件通过DI机制注入到子组件的构造方法中，这样你就可以通过祖先组件的引用来访问它们的方法和属性。

所以，、、都可以通过DI机制来获得最相近的组件的引用，从而共享它的开关状态。

Note: 
这里也可以使用service来共享状态，也许还会更便捷，但是我们可以通过DI来达到目的，我们可以在之后的章节（第十二章）来阐述service相关的内容，这部分内容会与React Context Provider的内容对应。

成果

你可以在在线代码仓库看到，有两个组件如我们预期的那样被渲染，并且有一个组件，其中有和两个组件。

这些子组件都会监听同一个组件的开关状态。

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

译者注

依赖注入是Angular中提供的很强大的功能，在angularjs中就表现出色并作为卖点。

如果仔细思考的话，我们可以发现，在这一版的实现中，对于组件的引用获取方式，从命令式转变为了声明式，因为我们不再关心获取引用的细节（比如具体使用@ContentChild还是@ContentChildren）。

同时，依赖注入机制是依附于组件本身存在的，并不依附于模板的层级关系，因此不会面临问题二的困扰。

对于木偶组件本身，往往作为消费者存在，这种情况下使用DI机制可能会达到更好的效果。

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

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

高级 Angular 组件模式 (6)

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

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

摘要：原文如那样，我们将使用一个相对简单的组件来说明这些模式。组件的职责是仅仅是管理一个简单的布尔值状态属性。文件夹并且特别是，将针对库在不同的情形下的使用做出相应的改变。写在前头 Angular到现在已经到5.x的版本了，对于MVVM框架我首先接触的是angularjs后来又转为react，之后换了工作因项目技术栈的原因又转换到之前的angularjs，在实际工作中实施了公司几个比较重要...

Corwien 2019-08-21 18:47 评论0 收藏0
高级 Angular 组件模式 (7)

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

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

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

Taste 2019-08-21 18:47 评论0 收藏0
高级 Angular 组件模式 (5)

摘要：实现模板引用变量是获取某个元素组件或者指令引用的一种方式，这个引用可以在当前的视图模板中的任何地方使用。它们通常是以或者的语法声明的。成果在中，我通过打印模板引用变量所指向的类的名字来演示它所代表的引用。 05 Handle Template Reference Variables with Directives 原文: Handle Template Reference Variab...

JouyPub 2019-08-22 14:51 评论0 收藏0