高级 Angular 组件模式 (2)

02 Write Compound Components

原文: Write Compound Components

目标

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

实现

我们可以把toggle抽象为一个复合组件,由三个新的组件<toggle-button><toggle-on><toggle-off>构成。

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

  • toggle-button: 代表开关,用来渲染父组件的开关状态
  • toggle-on: 根据父组件的开关状态,渲染当状态为时的内容
  • toggle-off: 根据父组件的开关状态,渲染当状态为时的内容

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

成果

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

相关话题

  • @ContentChild装饰器将会返回在组件标签包含的内容中,第一个符合选择器的子组件或者子指令的引用,比如<toggle> This is the content </toggle>。如果想获取所有的子组件或者子指令,使用@ContentChildren
  • @ViewChild或者@ViewChildren装饰器是用来获取在组件内部模板中使用的单个或者多个组件的。比如template: 'This is the view'或者templateUrl: './my.component.html'

译者注

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

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

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

  • Content代表内容,这些内容在组件渲染时已经存在于组件声明标签的内部,通常在组件内部以<ng-content>为占位符
  • View代表视图,视图代表组件本身的模板,代表组件本身的渲染逻辑

@ContentChildren@ViewChildren同理。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

28050
来自专栏石奈子的Java之路

原 Intellij IDEA 2017

32860
来自专栏coding for love

浏览器加载解析渲染机制的全面解析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

12910
来自专栏葡萄城控件技术团队

用WijmoJS搭建您的前端Web应用 —— React

在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法。

11130
来自专栏阮一峰的网络日志

文件上传的渐进式增强

文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 ? 网...

37760
来自专栏前端儿

微信小程序 - 入门指引

设置 -> 开发者设置 -> 服务器域名中   配置好服务器域名,小程序才能正确地发起异步请求

1.4K10
来自专栏weixuqin 的专栏

sublime下让代码居中

415130
来自专栏从零开始学 Web 前端

Sublime Text3 一些实用设置

当你把脑袋扭过到显示器以外的地方后再回头看编辑器,光标呢?然后你可能会花点小功夫找到他,就像你平时找鼠标的时候。这个设置会让让光标所处在的那一行高亮,只是稍微亮...

40820
来自专栏mwangblog

git标签

15330
来自专栏游戏杂谈

HTML5的File API

说到File API,比如有意思就是图片上传了。国外有一个网站叫min.us  用户只需要把图片拖到网页面中,然后自己进行排序就OK了,很方便。

34120

扫码关注云+社区

领取腾讯云代金券