Portal 的主要使用场景是 dynamic component 动态的插入模板或组件.

Portal 可分为 2 种. 进入和出去 (in or out)

ComponentPortal, TemplatePortal 属于第一种 in

PortalOutlet 属性 out

TemplatePortal 可以通过指令来创建, component 只能通过实例化来创建.

要明白它们的使用技巧最好是先理解在 ng 里如果自己创建动态组件.

可以看看我之前的学习笔记, 虽然有点旧, 可能有些地方已经不兼容最新版本了, 但是概念还是差不多的.

portal and portal outlet 简单说就是封装了 dynamic compoenent 和 template outlet 的使用.

而在 material 中, 大部分的情况下 portaloulet 是基于 overlay 来使用的. 意思是我们并不直接使用 portaloutlet 而是使用另一个更上层的实现 overlay.

下一篇在介绍.

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

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

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

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

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

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

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

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

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

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

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

  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. hadoop2.x源码编译

    转载请标明出处: http://blog.csdn.net/zwto1/article/details/50733753: 介绍 本篇主要会涉及以下内容: 学会编译hadoop2.x源码 编译hado ...

  2. TCP 连接关闭及TIME_WAIT探究

    这里主要记录一下TCP连接在关闭的时刻,有哪些细节问题.方便在以后的程序设计中能够注意这些细节, 以避免出现这些错误.首先我们来看一下TCP的状态转换图.如<unix网络编程>卷一所示如下 ...

  3. jquert 判断checkbox 是否选中

    <input type="checkbox" id="IsEnable" /> 在调试的时候,会出现,一直未true的状态,不管是选中还是未选中 解 ...

  4. 新装的Linux服务系统安装MySQL

    目的描述:全新的腾讯云Linux服务器,系统是ubuntu 16.04.需要在上面安装mysql数据库. 使用XShell远程登录,在终端窗口中使用sudo apt-get 指令在线安装mysql. ...

  5. Axis1.4之定制发布服务

    将axis1.4_home\webapps目录下的axis文件夹拷贝到tomcat_home\webapps目录下.然后在tomcat_home\webapps\axis\WEB-INF\lib下添加 ...

  6. hadoop2.6.5运行wordcount实例

    运行wordcount实例 在/tmp目录下生成两个文本文件,上面随便写两个单词. cd /tmp/ mkdir file cd file/ echo "Hello world" ...

  7. centos7环境下mysql5.7的安装与配置

    最近无事闲来折腾虚拟机,以前都是折腾云服务器,现在自己捣捣.看到mysql的教程蛮好的,准备做个笔记.原文来自mysql5.7的安装与配置(centos7环境) 第一步:下载mysql [root@M ...

  8. 三十天学不会TCP,UDP/IP网络编程 -- TCP中的智慧之连续ARQ

    突然发现上一篇文章贴图有问题,关键我怎么调也调不好,为了表达歉意,我再贴一篇gitbook上的吧,虽然违背了我自己的隔一篇在这里发一次的潜规则~其余完整版可以去gitbook(https://www. ...

  9. va_list va_start va_end va_arg 解决变参问题

    解决参数个数不确定的问题. 头文件 #include<stdarg.h> VA_LIST 是在C语言中解决变参问题的一组宏,用于获取不确定个数的参数. #ifdef _M_ALPHA ty ...

  10. XMAN-level4

    [XMAN] level4 首先checksec,信息如下 [*] '/root/Desktop/bin/pwn/xman-level4/level4' Arch: i386-32-little RE ...