<div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged()">

  <ng-content></ng-content>

</div>

使用 cdkObserveContent 能让我们监听到 ng-content 内部的变化.

比如某个值换了，或则某个 element 被移除了等等.

在 onpush 的情况下, 通常上面这种 ng-content 的设计, 我们会希望如果 content 改变了, 当前模板也 detechchange, 但是由于 content 并不属于当前模板的 child 所以是不会自动 detechchange 了.

因此就可以使用这个指令啦.

其实现原理是用到了 dom api Mutation Observer, 是 html5 的东西.

嗯..没了

Angular 学习笔记 ( CDK - Observers )的更多相关文章

  1. Angular 学习笔记 ( CDK - Accessibility )

    @angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家 ...

  2. Angular 学习笔记 ( CDK - Portal )

    Portal 的主要使用场景是 dynamic component 动态的插入模板或组件. Portal 可分为 2 种. 进入和出去 (in or out) ComponentPortal, Tem ...

  3. Angular 学习笔记 (cdk focus monitor 和一些 focus tabindex 的基础)

    更新 : 2019-12-22 focusInitialElementWhenReady  我们经常会调用到这个方法, 它的逻辑是这样 先看有没有 cdkFocusInitial 有的就 focus ...

  4. Angular 学习笔记 ( CDK - Overlays )

    更新 : 2018-01-30 ng 的 overlap 在关闭的时候对 backdrop 做了一个 style pointer 目的是让 backdrop 不被 2 次点击, 但是呢,  css p ...

  5. Angular 学习笔记 ( CDK - Layout )

    简单说就是 js 的 media query. 1. BreakpointObserver  const layoutChanges = this.breakpointObserver.observe ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  8. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  9. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. 大数据(3)：基于sogou.500w.utf8数据Hbase和Spark实践

    1. HBase安装部署操作 a) 解压HBase安装包tar –zxvf hbase-0.98.0-hadoop2-bin.tar.gzb) 修改环境变量 hbase-env.shexport JA ...

  2. Unity 网格合并

    从优化角度,Mesh需要合并. 从换装的角度(这里指的是换形状.换组成部件的换装,而不是挂点型的换装),都需要网格合并.材质合并.如果是人物的换装,那么需要合并SkinnedMeshRenderer, ...

  3. centos6.8安装cdh5.10.0（离线版）

    Centos6.8安装CDH5 相关包的下载地址: Cloudera Manager地址:http://archive.cloudera.com/cm5/cm/5/ CDH安装包地址:http://a ...

  4. 第一周CoreIDRAW课总结

      一. 问:这节课学到了什么知识? 答:这节课我学到了很多知识,作为初学者的我,老师给我讲了CorelDEAW的启动,安装,基础知识和应用与用途. 基础知识 位图:是由无数个像素点构成的图像,又叫点 ...

  5. Nginx正向代理与反向代理

    1.正向代理: 正向代理类似一个跳板机,代理访问外部资源. 典型应用:为在防火墙内的局域网客户端提供访问Internet的途径    如:IE例外设置代理服务器 正向代理配置实例:为不影响默认配置:添 ...

  6. ASCII十进制转字符串的方法

    /// <summary> /// ASCII转字符串 /// </summary> /// <param name="asciiCode">A ...

  7. #Python3.6.2(32位) pip安装 和 pygame 环境配置

    #首先确认电脑已经安装python ,可通过在命令行下 执行 python --version确认. 1. 到 https://pypi.python.org/pypi/setuptools/ 下载 ...

  8. ubuntu apt-get安装、卸载软件命令及如何查看日志

    linux亮红灯的我,开始学习linux,学习使我快乐,大家一起来学习... 1.安装软件命令 sudo apt-get apache2     安装apache,安装在默认路径下,指定路径安装,其实 ...

  9. easyUi五个常用插件

    1.对话框(Dialog) 对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏.默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具.用户可以配置对话框 ...

  10. 修改GeoJson的网址

    http://geojson.io       可以打开自己的json  然后修改