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. CSS滚动条设置

    /*IE滚动条颜色设置*/ body { scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ scrollbar-track-color:#1589ce; /*底层背景色* ...

  2. java线程学习第一天__低配版的卖面包机

    package Thread;import javax.xml.bind.ValidationEvent;class snacks{    private int  SaledSnacks=0;   ...

  3. MySQL的奇怪的删表数据文件而表照样能打开

    MySQL的奇怪的删表数据文件而表照样能打开 author:headsen  chen      2017-11-02   17:57:17 现象:删除一个正在运行的mysql数据库的表的数据文件:* ...

  4. 解决浏览器兼容ES6特性

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  5. 基于Cesium三维地图项目记录_通视分析功能的实现

    实现了剖面分析功能之后,下面来看看如何实现通视分析,还是基本按照之前的思路实现: 了解软件LocaScape是怎么实现的: 网址如下:http://www.locaspace.cn/V3.0/help ...

  6. 【吐槽向】iOS 中的仿射变换

    什么是仿射变换矩阵 CGAffineTransform 实际上就是一个用于绘制 2D 图形的的仿射变换矩阵.仿射变换矩阵用于旋转.缩放.平移.扭曲(skew)在图形上下文中绘制的对象.CGAffine ...

  7. 走近webpack（4）--css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...

  8. laravel 原生 sql

    1.插入数据 DB::insert('insert into users (id, name, email, password) values (?, ?, ? , ? )',[1, 'Laravel ...

  9. 笔记：MyBatis Mapper XML文件详解 - Result Maps

    Result Maps(结果集) resultMap 元素是 MyBatis 中最重要最强大的元素.它就是让你远离 90%的需要从结果 集中取出数据的 JDBC 代码的那个东西, 而且在一些情形下允许 ...

  10. logback常用配置详解及logback简介

    logback 简介(一) Ceki Gülcü在Java日志领域世界知名.他创造了Log4J ,这个最早的Java日志框架即便在JRE内置日志功能的竞争下仍然非常流行.随后他又着手实现SLF4J 这 ...