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. Python函数学习——递归

    递归函数 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 函数实现过程 def calc(n): v = int(n//2) print(v) if v > ...

  2. canvas描绘渐变的矩形

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. postgresql数据操作

    windows下操作postgresql 删除数据库:dropdb.exe -U postgres 数据库名称 创建数据库createdb.exe -U postgres lilei_db1--lil ...

  4. ubuntu14.04行更新软件包

    ubuntu14.04行更新软件包 headsen  chen   2017-10-12 16:01:34 apt-get update对应的就是第一步. apt-get upgrade 与apt-g ...

  5. 使用jquery-panzoom来实现图片或元素的放大缩小

    1. html <div class="wrapper"> <a class="btn btn-md" ui-turn-off="A ...

  6. 【Python】 日志管理logging

    logging *****本文参考了http://www.cnblogs.com/dkblog/archive/2011/08/26/2155018.html ■ 最最基本的用法 logging模块用 ...

  7. ionic start 创建ionic项目报错，及解决过程

    问题描述: 前一次创建利用命令行创建ionic项目一次性成功,第二次没有运行: $ npm install -g ionic cordova 直接运行: ionic start ionicDemo 出 ...

  8. Algorithm --> 全排列

    1.算法简述 简单地说:全排列就是从第一个数字起每个数分别与它后面的数字交换. E．g:E = (a , b , c),则 prem(E)= a.perm(b,c)+ b.perm(a,c)+ c.p ...

  9. canvas星空和图形变换

    图形变换. 一.画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星. window.onload=function ...

  10. MyEclipse安装Eclipse Memory Analyzer插件以及使用例子

    一 :安装 1.Memory Analyzer 插件下载地址:http://www.eclipse.org/mat/downloads.php 2.将下载的文件解压到MyEclipse的  dropi ...