coercion 常用类型转换工具

@angular/cdk/coercion 常用类型转换工具

import { Component, OnInit } from "@angular/core";
import {coerceArray,coerceBooleanProperty,coerceNumberProperty,_isNumberValue
} from "@angular/cdk/coercion";
@Component({selector: "coercion",templateUrl: "./coercion.component.html",styleUrls: ["./coercion.component.scss"]
})
export class CoercionComponent implements OnInit {constructor() {}ngOnInit() {let a = 1;// 转化为arraylet aa = coerceArray(a);console.log(aa);// 转化为booleanlet b = coerceBooleanProperty("true");console.log(b);// 转化为numberlet c = coerceNumberProperty("10.0");console.log(c);// 判断是否numberlet isNum = _isNumberValue('d');console.log(isNum);}
}
复制代码

layout 响应式布局工具

@angular/cdk/layout 响应式布局工具

• Breakpoints 屏幕尺寸
• BreakpointObserver 观察器
• MediaMatcher 媒体查询匹配

import { Component, OnInit } from "@angular/core";
import {BreakpointObserver,BreakpointState,MediaMatcher,Breakpoints
} from "@angular/cdk/layout";
import { Observable } from "rxjs/Observable";
@Component({selector: "layout",templateUrl: "./layout.component.html",styleUrls: ["./layout.component.scss"]
})
export class LayoutComponent implements OnInit {isHandset: Observable<BreakpointState>;constructor(public bm: BreakpointObserver, public media: MediaMatcher) {}ngOnInit() {// 手持设备let Handset = Breakpoints.Handset;// 手持landscape屏let HandsetLandscape = Breakpoints.HandsetLandscape;//手持portrait屏let HandsetPortrait = Breakpoints.HandsetPortrait;// 多媒体let Medium = Breakpoints.Medium;// 平板电脑let Tablet = Breakpoints.Tablet;// 平板电脑 Landscapelet TabletLandscape = Breakpoints.TabletLandscape;// 平板电脑 Portraitlet TabletPortrait = Breakpoints.TabletPortrait;// weblet Web = Breakpoints.Web;// web landscapelet WebLandscape = Breakpoints.WebLandscape;// web portraitlet WebPortrait = Breakpoints.WebPortrait;// 大屏幕let Large = Breakpoints.Large;// 更大屏幕let XLarge = Breakpoints.XLarge;// 更小屏幕let XSmall = Breakpoints.XSmall;// 小屏幕let Small = Breakpoints.Small;let isSmall = this.media.matchMedia(Small);console.log("is small matcher", isSmall);console.log("is small", this.bm.isMatched(Small));let isXSmall = this.media.matchMedia(XSmall);console.log("is xsmall matcher", isXSmall);console.log("is xsmall", this.bm.isMatched(XSmall));// 是否满足多个条件this.bm.observe([Handset,HandsetLandscape,Handset,Medium,Tablet,TabletLandscape,TabletPortrait,Web,WebLandscape,WebPortrait,Large,XLarge,Small,XSmall]).subscribe(res => {console.log(res);});}
}
复制代码

keycodes 常用键码

@angular/cdk/keycodes 常用键码

export const UP_ARROW = 38;
export const DOWN_ARROW = 40;
export const RIGHT_ARROW = 39;
export const LEFT_ARROW = 37;
export const PAGE_UP = 33;
export const PAGE_DOWN = 34;
export const HOME = 36;
export const END = 35;
export const ENTER = 13;
export const SPACE = 32;
export const TAB = 9;
export const ESCAPE = 27;
export const BACKSPACE = 8;
export const DELETE = 46;
export const A = 65;
export const Z = 90;
export const ZERO = 48;
export const NINE = 57;
export const NUMPAD_ZERO = 96;
export const NUMPAD_NINE = 105;
export const COMMA = 188;
复制代码

bidi 布局方向

@angular/cdk/bidi 布局方向

• Directionality
• Direction
• DIR_DOCUMENT
• Dir
• BidiModule

<!--从左到右-->
<p dir="LTR">bidi works!
</p>
<!--从右到左-->
<p dir="RTL">bidi works!
</p>
<!--可以控制方向-->
<p [dir]="dir">bidi works!
</p><a href="javascript:;" (click)="switchDir()">改变</a>复制代码

import { Component, OnInit, Inject } from "@angular/core";
import { DIR_DOCUMENT, Directionality } from "@angular/cdk/bidi";
@Component({selector: "bidi",templateUrl: "./bidi.component.html",styleUrls: ["./bidi.component.scss"]
})
export class BidiComponent implements OnInit {dir: string = "rtl";constructor(@Inject(DIR_DOCUMENT) public dirDoc: any,public directionlity: Directionality) {}ngOnInit() {// 获取documentconsole.log(this.dirDoc);// ltr 获取当前值let dir = this.directionlity.value;console.log("dir is ", dir);}switchDir() {if (this.dir === "rtl") {this.dir = "ltr";} else {this.dir = "rtl";}}
}复制代码

platform 当前平台

@angular/cdk/platform 当前平台

• supportsPassiveEventListeners 是否支持被动监听
• getSupportedInputTypes 支持输入的类型
• Platform 服务

import { Component, OnInit } from "@angular/core";
import {Platform,supportsPassiveEventListeners,getSupportedInputTypes
} from "@angular/cdk/platform";
@Component({selector: "platform",templateUrl: "./platform.component.html",styleUrls: ["./platform.component.scss"]
})
export class PlatformComponent implements OnInit {constructor(public plat: Platform) {}ngOnInit() {// 是否支持被动监听let isSupportsPassiveEventListeners = supportsPassiveEventListeners();console.log("isSupportsPassiveEventListeners",isSupportsPassiveEventListeners);// 支持输入的类型let supportedInputTypes = getSupportedInputTypes();console.log("supportedInputTypes", supportedInputTypes);// 是否安卓let ANDROID = this.plat.ANDROID;// 是否IOSlet IOS = this.plat.IOS;// 是否BLINK引擎let BLINK = this.plat.BLINK;// 是否DEGE浏览器let EDGE = this.plat.EDGE;// 是否FIREFOX浏览器let FIREFOX = this.plat.FIREFOX;// 是否SAFARIlet SAFARI = this.plat.SAFARI;// 是否TRIDENTlet TRIDENT = this.plat.TRIDENT;// 是否WEBKITlet WEBKIT = this.plat.WEBKIT;// 是否浏览器let isBrowser = this.plat.isBrowser;}
}
复制代码

portal 动态内容呈现

@angular/cdk/portal 动态内容呈现

CdkPortal

[cdk-portal], [cdkPortal], [portal]

CdkPortalOutlet

[cdkPortalOutlet], [cdkPortalHost], [portalHost]

<h2 class="title">我是component</h2>
<ng-template #portalComponentOutlet cdkPortalOutlet></ng-template><h2 class="title">我是template</h2>
<ng-template #portalTemplateOutlet cdkPortalOutlet></ng-template><h2 class="title">我是会变得</h2>
<ng-template [cdkPortalOutlet]="greeting"></ng-template><h2 class="title">我是自动获取的</h2>
<ng-template [cdkPortalOutlet]="myCdkPortal2"></ng-template><ng-template cdkPortal #myCdkPortal>我是自动获取的，我是自动获取的
</ng-template><ng-template #tpl>ng template portal
</ng-template>
复制代码

import {Component,OnInit,ViewChild,TemplateRef,ViewContainerRef
} from "@angular/core";
import {CdkPortalOutlet,ComponentPortal,TemplatePortal,CdkPortal
} from "@angular/cdk/portal";
import { PortalCompComponent } from "./portal-comp/portal-comp.component";
@Component({selector: "app-portal",templateUrl: "./portal.component.html",styleUrls: ["./portal.component.scss"]
})
export class PortalComponent implements OnInit {greeting: any;@ViewChild("portalComponentOutlet", { read: CdkPortalOutlet })portalComponentOutlet: CdkPortalOutlet;@ViewChild("portalTemplateOutlet", { read: CdkPortalOutlet })portalTemplateOutlet: CdkPortalOutlet;@ViewChild("myCdkPortal", { read: CdkPortal })myCdkPortal2: CdkPortal;@ViewChild("tpl") tpl: TemplateRef<any>;constructor(public view: ViewContainerRef) {}ngOnInit() {console.log(this.myCdkPortal2);let componentPortal = new ComponentPortal(PortalCompComponent);let templatePortal = new TemplatePortal(this.tpl, this.view);// attach后不可变this.portalComponentOutlet.attach(componentPortal);// attach后不可变this.portalTemplateOutlet.attach(templatePortal);// 可以检测自动变更 推荐this.greeting = componentPortal;setInterval(() => {if (this.greeting === templatePortal) {this.greeting = componentPortal;} else {this.greeting = templatePortal;}}, 1000);}
}
复制代码

scrolling 滚动

@angular/cdk/scrolling 对滚动事件做出响应的工具包

ScrollDispatcher 滚动调度器

滚动调度器

@ViewChild("scrollAble", { read: CdkScrollable })scrollAble: CdkScrollable;@ViewChild("scrollAble2") scrollable2: ElementRef;constructor(public scrollDispatcher: ScrollDispatcher,public ele: ElementRef) {}ngOnInit() {}ngAfterViewInit() {// 获取所有cdkScrollableconst scrollContainers = this.scrollDispatcher.scrollContainers;console.log("scrollContainers", scrollContainers);// 注销一个cdkScrollablethis.scrollDispatcher.deregister(this.scrollAble);// 注册一个cdkScrollablethis.scrollDispatcher.register(this.scrollAble);// 获取上级滚动容器let elementRef = this.scrollAble.getElementRef();let ancestorScrollContainers = this.scrollDispatcher.getAncestorScrollContainers(elementRef);let ancestorScrollContainers2 = this.scrollDispatcher.getAncestorScrollContainers(this.scrollable2);console.log("ancestorScrollContainers", ancestorScrollContainers);console.log("ancestorScrollContainers2", ancestorScrollContainers2);// 滚动监听this.scrollDispatcher.scrolled().subscribe(res => {console.log(res);});}
复制代码

CdkScrollable 可滚动指令

用于注册可滚动元素

@ViewChild("scrollAble", { read: CdkScrollable })
scrollAble: CdkScrollable;constructor(public scrollDispatcher: ScrollDispatcher) {}ngOnInit() {}ngAfterViewInit() {// 元素是否滚动了this.scrollAble.elementScrolled().subscribe(res => {console.log("scroll able scrolling", res);});// 获取scroll able 的 ElementReflet scrollable1ElementRef = this.scrollAble.getElementRef();console.log("scroll able element ref", scrollable1ElementRef);
}
复制代码

ViewportRuler 视口

// 注入视口尺寸服务
constructor(public viewPort: ViewportRuler) {}ngOnInit() {// 监控视口变化this.viewPort.change().subscribe(res => {this.getViewPortInfo();});this.getViewPortInfo();
}
// 获取视口信息
getViewPortInfo(){let viewRect = this.viewPort.getViewportRect();console.log("view rect", viewRect);let viewPortScrollPosition = this.viewPort.getViewportScrollPosition();console.log("viewPortScrollPosition", viewPortScrollPosition);let viewPortSize = this.viewPort.getViewportSize();console.log("viewPortSize", viewPortSize);
}
复制代码

observers 监听dom变化

@angular/cdk/observers 监听dom变化

• @Input() debounce: number 发射时间间隔
• @Input('cdkObserveContentDisabled') disabled: any 可用开关
• @Output('cdkObserveContent') event: new EventEmitter<MutationRecord[]>() 内容更改触发

案例

<div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged()"><ng-content></ng-content>
</div>
复制代码

定位策略

PositionStrategy

滚动策略

ScrollStrategy

块滚动策略

BlockScrollStrategy

空的滚动策略

NoopScrollStrategy

关闭滚动策略

CloseScrollStrategy

关闭滚动策略配置

CloseScrollStrategyConfig

滚动策略配置项

ScrollStrategyOptions