10分钟快速上手angular cdk

时间 2019-11-24

原文原文链接

coercion 经常使用类型转换工具

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

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 响应式布局工具css

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 经常使用键码html

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 布局方向java

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 当前平台web

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]bash

CdkPortalOutlet

[cdkPortalOutlet], [cdkPortalHost], [portalHost]app

<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 对滚动事件作出响应的工具包dom

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