<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. php notice提示

    php页面内添加error_reporting(E_ALL & ~E_WARNING & ~E_NOTICE ); OK.

  2. C语言编程之道--读书笔记

    C语言语法 const int nListNum =sizeof(aPrimeList)/sizeof(unsigned);//计算素数表里元素的个数 1:#define INM_MAX 32767 ...

  3. Firefox配置文件夹详解

    参考此文会帮助你更好的管理和备份Firefox配置文件,此文没有列出的文件大多是Firefox运行时生成的一些随机文件,大多无用,备份或管理配置文件时酌情删除. 在地址栏输入about:support ...

  4. nodejs加密Crypto简单例子

    加密技术通常分为两大类:“对称式”和“非对称式”. 对称式加密: 就是加密和解密使用同一个密钥,通常称之为“Session Key ”这种加密技术在当今被广泛采用,如美国政府所采用的DES加密标准就是 ...

  5. Java过滤器Filter使用详解

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6374212.html 在我的项目中有具体应用:https://github.com/ygj0930/Coupl ...

  6. 造轮子-Java泛型堆排

    个人博客地址:http://kyle.org.cn/2018/03/13/heapsort/ Java实现泛型堆排算法,用于N个对象中选择最大或者最小的前M个,其中M<=N 类似于Mysql中o ...

  7. STL --> string类字符串

    基本使用方法 一.输入 string s: cin >> s; getline(cin, s) ; //使用默认的'\n'作为终止符 getline(cin, s, '!') ; //以' ...

  8. DotNetBar控件，superTabControl多文档界面（MDI）的风格、多Tab的创建方法

    最近在做一个条码系统的项目,第一次用dotnetbar控件,,查找资料时看到伍老师一篇文章(链接),但是没有关于加载tab窗口的方法,自己摸索做了一个此类风格出来,并写了一个通用方法,供大家参考. 风 ...

  9. 如何让shell脚本自杀

    有些时候我们写的shell脚本中有一些后台任务,当脚本的流程已经执行到结尾处并退出时,这些后台任务会直接挂靠在init/systemd进程下,而不会随着脚本退出而停止. 例如: [root@maria ...

  10. python全栈开发-Day11 迭代器、生成器、面向过程编程

    一. 迭代器 一 .迭代的概念 迭代器即迭代的工具,那什么是迭代呢? 迭代是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果都是下一次迭代的初始值 while True: #只是单纯地重复,因而 ...