10分钟快速上手angular cdk

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;
    // 转化为array
    let aa = coerceArray(a);
    console.log(aa);
    // 转化为boolean
    let b = coerceBooleanProperty("true");
    console.log(b);
    // 转化为number
    let c = coerceNumberProperty("10.0");
    console.log(c);

    // 判断是否number
    let 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;
    // 平板电脑 Landscape
    let TabletLandscape = Breakpoints.TabletLandscape;
    // 平板电脑 Portrait
    let TabletPortrait = Breakpoints.TabletPortrait;
    // web
    let Web = Breakpoints.Web;
    // web landscape
    let WebLandscape = Breakpoints.WebLandscape;
    // web portrait
    let 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() {
    // 获取document
    console.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;
    // 是否IOS
    let IOS = this.plat.IOS;
    // 是否BLINK引擎
    let BLINK = this.plat.BLINK;
    // 是否DEGE浏览器
    let EDGE = this.plat.EDGE;
    // 是否FIREFOX浏览器
    let FIREFOX = this.plat.FIREFOX;
    // 是否SAFARI
    let SAFARI = this.plat.SAFARI;
    // 是否TRIDENT
    let TRIDENT = this.plat.TRIDENT;
    // 是否WEBKIT
    let 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() {
    // 获取所有cdkScrollable
    const scrollContainers = this.scrollDispatcher.scrollContainers;
    console.log("scrollContainers", scrollContainers);
    // 注销一个cdkScrollable
    this.scrollDispatcher.deregister(this.scrollAble);
    // 注册一个cdkScrollable
    this.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 的 ElementRef
    let 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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,393评论 5赞 467
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,790评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,391评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,703评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,613评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,003评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,507评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,158评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,300评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,984评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,569评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2赞 339

推荐阅读更多精彩内容

  • RecyclerView API译文
    简介： 提供一个让有限的窗口变成一个大数据集的灵活视图。 术语表： Adapter：RecyclerView的子类...
    酷泡泡阅读 5,128评论 0赞 16
  • 老朋友 二首
    老朋总是觉 得有幅什么画面 特别像他又隔着一层老想不起来 直到前些日子一起赴酒会 看见他夸奖中年女人时的神情 才算...
    典裘沽酒阅读 250评论 0赞 0