<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. 使用shutdown命令实现局域网内远程关机、重启整蛊他人

    用法: shutdown [/i | /l | /s | /r | /g | /a | /p | /h | /e | /o] [/hybrid] [/soft] [/f]    [/m \\compu ...

  2. gulp菜鸟级零基础详细教程

    : 相信大家一定听说过gulp或者webpack,grunt等前端构建工具.gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的 ...

  3. 《深入理解计算机系统》第7章：重定位PC相对引用的理解

    在第七章<链接>中的静态链接有对符号进行重定位PC相对引用的处理,书上对应的还有公式,但不是很好理解.现做实验对公式进行理解(公式内容如有兴趣可以参考原文)

  4. [Luogu 2642] 双子序列最大和

    Description 给定一个长度为n的整数序列,要求从中选出两个连续子序列,使得这两个连续子序列的序列和之和最大,最终只需输出最大和.一个连续子序列的和为该子序列中所有数之和.每个连续子序列的最小 ...

  5. Python之sqlite3

    Python sqlite3数据库是一款非常小巧的内置模块,它使用一个文件存储整个数据库,操作十分方便,相比其他大型数据库来说,确实有些差距.但是在性能表现上并不逊色,麻雀虽小,五脏俱全,sqlite ...

  6. Spring Cloud简介以及版本选择

    什么是SpringCloud 官方的说法就是spring Cloud 给开发者提供一套按照一定套路快速开发 分布式系统 的工具. 具体点就是Spring boot实现的微服务架构开发工具.它为微服务架 ...

  7. 【源码分析】你必须知道的string.IsNullOrEmpty && string.IsNullOrWhiteSpace

    写在前面 之前自信撸码时踩了一次小坑,代码如下: private static void AppServer_NewMessageReceived(WebSocketSession session, ...

  8. 实验楼 -- (Linux)

    1. 允许用户SSH登陆 # 打开ssh配置文件, 一般在/etc/ssh/sshd_config sudo vim /etc/ssh/sshd_config # 在文件最后添加: # 其中shiya ...

  9. Pla

    Pla(jdoj1006) 题目大意:给你n个矩形,并排放在一起,你的目的是将所有的矩形全部染色.你每次染的形状为一个矩形,问:最少需要染多少次? 注释:n<=10^6,wi , hi<= ...

  10. java日期格式大全 format SimpleDateFormat

    http://www.cnblogs.com/loveyakamoz/archive/2011/08/18/2145047.html