高级 Angular 组件模式 (2)

Taste 发布于2019-08-21 18:47 / 1342人阅读

摘要：相关话题装饰器将会返回在组件标签包含的内容中，第一个符合选择器的子组件或者子指令的引用，比如。或者装饰器是用来获取在组件内部模板中使用的单个或者多个组件的。

02 Write Compound Components

原文: Write Compound Components

目标

我们需要实现的需求是能够使使用者通过组件动态的改变包含在它内部的内容。

实现

我们可以把toggle抽象为一个复合组件，由三个新的组件、、构成。

每一个组件的职能与它们的父组件保持一致，它们各自的职能如下：

toggle-button: 代表开关，用来渲染父组件的开关状态

toggle-on: 根据父组件的开关状态，渲染当状态为开时的内容

toggle-off: 根据父组件的开关状态，渲染当状态为关时的内容

组件可以实现@ContentChild装饰器获取这三个子组件的引用，从而可以根据开关状态的变化调整它们之间的关联逻辑。

成果

经过这样的调整，我们可以使用户通过使用组件去自定义包含在它其中内容的显示逻辑，内容中会有一个按钮负责切换开关的状态。可以尝试在在线代码库中调整子组件的顺序，你可以在它们中间嵌套任何的html字符串，只要这三个组件是作为的子组件存在的，一切都将正常的运行。

相关话题

@ContentChild装饰器将会返回在组件标签包含的内容中，第一个符合选择器的子组件或者子指令的引用，比如 This is the content 。如果想获取所有的子组件或者子指令，使用@ContentChildren。

@ViewChild或者@ViewChildren装饰器是用来获取在组件内部模板中使用的单个或者多个组件的。比如template: "This is the view"或者templateUrl: "./my.component.html"

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

译者注

这里组件架构方式是标准的Smart Component（智能组件）和Dump Component（木偶组件）组件架构方式。

以上的需求完全是可以在内部实现的，但是这样会使它的内部充满逻辑代码，反之我们可以将一些职能划分为成更小的碎片，并委托到它的子组件中，本身作为容器组件存在，负责协作子组件从而达到目的。

对于@ContentChild和@ViewChild的使用场景，我认为通过看装饰器前缀的寓意是最后的方式。

Content代表内容，这些内容在组件渲染时已经存在于组件声明标签的内部，通常在组件内部以为占位符

View代表视图，视图代表组件本身的模板，代表组件本身的渲染逻辑

@ContentChildren和@ViewChildren同理。

GPU云服务器云服务器 javascript高级程序设计第2版 Angular cdn angular angular cdn

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

转载请注明本文地址：https://www.ucloud.cn/yun/90809.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 组件模式 (3a)

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

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

摘要：原文的第四篇文章中的一个重要元素在上一篇文章中没有涉及，使用高阶组件中的常用模式可以将组件中的公用逻辑分离出来。同时，因为组件的模板并不存在任何的变动，我们可以将它转化为一个指令，这样我们可以以更加灵活的方式来使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...

wums 2019-08-21 18:46 评论0 收藏0