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. 微信小程序基于腾讯云对象存储的图片上传

    在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...

  2. 关于安装了VMware tools后仍然不支持拖拽文件的问题

    我在学校机房里面的redhat4上面安装了VMware tools之后能正常支持拖拽,但是我自己电脑上的却不支持,折腾了好久,网上找了很久也还是没有解决,不过发现了一些问题,总结如下:(当然我总结的这 ...

  3. python中的lambda函数用法

    例1:传入多个参数的lambda函数def sum(x,y): return x+y用lambda来实现:p = lambda x,y:x+yprint(4,6) 例2:传入一个参数的lambda函数 ...

  4. Java设计模式（六）Adapter适配器模式

    一.场景描述 “仪器数据采集器”包含采集数据以及发送数据给服务器两行为,则可定义“仪器数据采集器”接口,定义两方法“采集数据capture”和“发送数据sendData”. “PDF文件数据采集器”实 ...

  5. 在js中实现新窗口打开页面

    我们都知道可以在html代码中使用<a href="xxxx" target="_blank"></a>这种方式来打开一个新的窗口打开一 ...

  6. NGUI_Texture

    六.UITexture:在屏幕上显示一张图片,和Sprite类似,但是UITexture会单独消耗一个DrawCall去渲染, 会单独加载进内存,会增加内存的开销. 1.使用UITexture时要遵循 ...

  7. Java面试宝典-2017

    Java面试宝典2017版 一. Java基础部分........................................................................... ...

  8. Android GC Log

    最近在研究Android内存垃圾回收的内容,遇到一些自己之前不知道的技巧和方法.现在分享一种简单的在Logcat中可以看到垃圾回收状态的方法.经常关注Logcat日志的童鞋偶尔会看到一条类似于以下形式 ...

  9. 上传到 App Store 时出错。

      Try this, it fixed it for me. Open Terminal and run: cd ~ mv .itmstransporter/ .old_itmstransporte ...

  10. 【Python】 用户图形界面GUI wxpython III 更多组件

    wxpython - 更多组件 我写到的这些组件可能一来不是很详细,二来不是最全的,想要更好地用这些组件,应该还是去看看教程和别的示例.比较简单的,推荐http://download.csdn.net ...