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

Angular 学习笔记 ( CDK - Portal )

Portal 的主要使用场景是 dynamic component 动态的插入模板或组件. Portal 可分为 2 种. 进入和出去 (in or out) ComponentPortal, TemplatePortal 属于第一种 in PortalOutlet 属性 out TemplatePortal 可以通过指令来创建, component 只能通过实例化来创建. 要明白它们的使用技巧最好是先理解在 ng 里如果自己创建动态组件. 可以看看我之前的学习笔记, 虽然有点旧, 可能有些地方…

Angular 学习笔记 ( CDK - Accessibility )

@angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家用. 这系列是我按照官网教程和查了一下 angular/material 源码的学习笔记. 1. KeyManger  运用场景是 select, menu 这种有 list options 的组件, 负责处理键盘上下按钮时 option active 的逻辑 ng 提供了 3 个类 ListKey…

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

更新 : 2019-12-22 focusInitialElementWhenReady  我们经常会调用到这个方法, 它的逻辑是这样 先看有没有 cdkFocusInitial 有的就 focus (不管它是不是 tabbable, 比如 disabled 就不是 tabbable) 如果你没写这个,那么它就去找 cdkFocusRegionStart  然后 focus, 同样不管是不是 tabbable 依然找不到那么它就去整个 focus trap element 里面找 第一个 tab…

Angular 学习笔记 ( CDK - Overlays )

更新 : 2018-01-30 ng 的 overlap 在关闭的时候对 backdrop 做了一个 style pointer 目的是让 backdrop 不被 2 次点击, 但是呢,  css pointerEvent 'none' 也有一个穿透的效果,就是说, backdrop 还没完全关上时, 其后面的按钮是可以被点击到的. 这个需要注意,因为可能你并不想这样. 另外一个要说的是, overlap 是可以打开多个的. 通过多个 overlapRef 去自行做管理. 所以请把 overla…

Angular 学习笔记 ( CDK - Layout )

简单说就是 js 的 media query. 1. BreakpointObserver  const layoutChanges = this.breakpointObserver.observe([ '(orientation: portrait)', '(orientation: landscape)', ]); layoutChanges.subscribe(result => { updateMyLayoutForOrientationChange(); }); ng 还包装了一个…

Angular 学习笔记 ( CDK - Observers )

<div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged()"> <ng-content></ng-content> </div> 使用 cdkObserveContent 能让我们监听到 ng-content 内部的变化. 比如某个值换了,或则某个 element 被移除了等等. 在 onpush 的情况下, 通…

angular学习笔记(三十一)-$location(2)

之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和history api创建单页应用 首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.…

angular学习笔记(三十一)-$location(1)

本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的相关方法: 以 'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例: 1. 获取当前完整的url路径: $location.absUrl():// http://localhost/$loc…

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv…

angular学习笔记(三十)-指令(7)-compile和link(2)

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-…