<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. Angular：Reactive Form的使用方法和自定义验证器

    本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...

  2. k60引脚图

    /*! 枚举管脚编号 */ typedef enum { /* PTA端口 */ //0~31 PTA0, PTA1, PTA2, PTA3, PTA4, PTA5, PTA6, PTA7, PTA8 ...

  3. 设计模式——外观模式（C++实现）

    #include <string> #include <iostream> using namespace std; class STSystemA { public: voi ...

  4. VMware静态地址上网

    虚拟机通过dhcp获取ip,当系统重启时可能导致ip变更,出现不必要的麻烦,以下是通过nat模式设置虚拟机静态ip同时能够上网的方式. 编辑VMware,依次点击“编辑”--“虚拟网络编辑器” 注:为 ...

  5. 希尔排序（shell‘ sort）

    希尔排序是1959 年由D.L.Shell 提出来的,相对直接排序有较大的改进.希尔排序又叫缩小增量排序 基本思想: 先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序,待整个序列中的记录 ...

  6. centos7下更改docker镜像和容器的默认路径

    笔者近期在服务器上搭建docker环境,可由于笔者是普通用户,在安装的时候就跳了很多坑,现在记录一下. 一.docker权限问题 据官方解释,搭建docker环境必须使用root权限,或者sudo装, ...

  7. Redis相关命令

    一.命令示例 1. KEYS/RENAME/DEL/EXISTS/MOVE/RENAMENX: #在Shell命令行下启动Redis客户端工具. /> redis-cli #清空当前选择的数据库 ...

  8. Sort of Python

    表达式和运算符 什么是表达式? 1+2*3 就是一个表达式,这里的加号和乘号叫做运算符,1.2.3叫做操作数.1+2*3 经过计算后得到的结果是7,就1+2*3 = 7.我们可以将计算结果保存在一个变 ...

  9. openjudge（三）

    已知三角形的三边分别是a.b.c, 先算出周长的一半s=1/2(a+b+c) 则该三角形面积S=根号[s(s-a)(s-b)(s-c)] 这个公式叫海伦--秦九昭公式 证明: 设三角形的三边a.b.c ...

  10. 【详细】总结JavaWeb开发中SSH框架开发问题（用心总结，不容错过）

    在做JavaWeb的SSH框架开发的时候,遇到过很多的细节问题,这里大概记录下 我使用的IDE是Eclipse(老版本)三大框架:Spring4.Struts2.Hibernate5 1.web.xm ...