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. Infinite Fraction Path HDU 6223 2017沈阳区域赛G题题解

    题意:给你一个字符串s,找到满足条件(s[i]的下一个字符是s[(i*i+1)%n])的最大字典序的长度为n的串. 思路:类似后缀数组,每次倍增来对以i开头的字符串排序,复杂度O(nlogn).代码很 ...

  2. 大数据Hadoop与Spark学习经验谈

    昨晚听了下Hulu大数据基础架构组负责人–董西成的关于大数据学习方法的直播,挺有收获的,下面截取一些PPT的关键内容,希望对正在学习大数据的人有帮助. 现状是目前存在的问题,比如找百度.查书这种学习方 ...

  3. python已安装了DNS处理模块，执行时却报错ImportError

    一.代码: #!/usr/bin/python import dns.resolver ............此处省略 二.故障报错 ubuntu:~/automation/001_base$ py ...

  4. es6学习笔记--新数据类型Symbol

    学习了es6语法的symbol类型,整理笔记,闲时复习. Symbol 是es6新增的第七种原始数据类型(null,string,number,undefined,boolean,object),是为 ...

  5. 用IDEA生成javadoc文档

    用IDEA生成javadoc文档 打开相应的选项面板 设置 -encoding是java代码编码,-charset是对生成文档所用的编码.-windowtitle就是对应html的<title& ...

  6. MySql （MariaDB）的varchar字段的存储的是字符还是字节

    关于varchar字段: 在version4之前,按字节: version5之后,按字符. 现在普遍都按字符算:无论中文英文,都算一个字符 既: varchar(10) == '123456789a' ...

  7. eclipse的Debug模式下的快捷键

    主要快捷键: F5, F6, F7, F8的使用 F5:  进入当前方法 F6: 一步步执行 F7:  跳出方法, 返回到调用此方法的最后一条语句 F8: 继续执行,跳转到下一个断点的位置 示例: 在 ...

  8. 从源码浅析Java中的Lock和AbstractQueuedSynchronizer

    在之前的文章中我也曾经介绍过Lock,像ReentrantLock(可重入锁)和ReentrantReadWriteLock(可重入读写锁),这些所我们在说的时候并没有详细的说明它们的原理,仅仅说明了 ...

  9. Java高级篇（一）——线程

    前面我们系统的了解了Java的基础知识,本篇开始将进入到Java更深层次的介绍,我们先来介绍一下Java中的一个重要的概念--线程. 一.什么是线程 在了解线程前,我们首先要了解进程的概念.进程是操作 ...

  10. Mysql的执行计划各个参数详细说明

    执行计划各个参数的说明 1.id 主要是用来标识sql的执行顺序,如果没有子查询,一般来说id只有一个,执行顺序也是从上到下 2.select_type 每个select子句的类型 a:  simpl ...