cdk Bidirectionality提供给我们的功能，就是用来设置布局方向。更加详细的内容可以参考官网 https://material.angular.io/cdk/bidi/overview

使用之前先provider BidiModule

import {BidiModule} from '@angular/cdk/bidi';

bidi里面咱们需要知道的就两个东西：一个Service Directionality、一个指令 Dir。

一 Directionality

Directionality Service两个左右：获取当前应用程序的布局方向、监听应用程序布局方向的变化。

1.1 Directionality Service属性方法

export declare class Directionality implements OnDestroy {/** 当前应用程序的布局方向 'ltr' or 'rtl' */readonly value: Direction;/** 当前应用程序的布局方向发生改变了的回调函数 'ltr' / 'rtl' state changes. */readonly change: EventEmitter<Direction>;
}

1.2 Directionality Service使用

import {Component, Inject, OnDestroy} from '@angular/core';
import {DIR_DOCUMENT, Directionality} from '@angular/cdk/bidi';
import {Subscription} from "rxjs";@Component({selector: 'app-cdk-bidi',templateUrl: './cdk-bidi.component.html',styleUrls: ['./cdk-bidi.component.less']
})
export class CdkBidiComponent implements OnDestroy {private _dirChangeSubscription = Subscription.EMPTY;constructor(@Inject(DIR_DOCUMENT) public dirDoc: any,public directionality: Directionality) {this._dirChangeSubscription = directionality.change.subscribe(() => {console.log('bbb');});}ngOnDestroy() {this._dirChangeSubscription.unsubscribe();}
}

常规Service的用法

二 Dir

Dir指令用于设置布局方向和监听布局方向的变化。

Selector: [dir]

Exported as: dir

2.1 Dir指令属性

属性	类型	解释
change: EventEmitter	@Output(‘dirChange’)	当前视图布局方向发生改变的时候调用
value: Direction		当前视图元素的布局方向

2.2 Dir指令使用

import {Component} from '@angular/core';@Component({selector: 'app-cdk-bidi',template: `<!--从左到右--><p dir="LTR" style="border: solid 1px #ccc; color: red; padding: 10px">从左到右排列</p><!--从右到左--><p dir="RTL" style="border: solid 1px #ccc; color: red; padding: 10px">从右到左排列</p><div dir="RTL" style="border: solid 1px #ccc; padding: 10px"><div style="margin-left: 8px; margin-right: 8px; display: inline-block; width: 250px; background-color: #cccccc; padding: 4px; color: red"dir="LTR">第一个位置--内容靠左</div><div style="margin-left: 8px; margin-right: 8px; display: inline-block; width: 250px; background-color: #cccccc; padding: 4px; color: red"dir="RTL">第二个位置--内容靠右</div></div><!--可以控制方向--><p [dir]="dir" (dirChange)="dirChange()" style="border: solid 1px #ccc; color: red; padding: 10px">可以动态切换方向</p><button (click)="switchDir()">切换方向</button>`
})
export class CdkBidiComponent {dir = "rtl";switchDir() {if (this.dir === "rtl") {this.dir = "ltr";} else {this.dir = "rtl";}}dirChange() {console.log('aaa');}
}

因为cdk bidi的使用非常简单，所以我们讲的也非常的简单。实例连接 https://github.com/tuacy/angular-cdk-study

Angular cdk 学习之 Bidirectionality（bidi）相关推荐

Angular cdk 学习之 Scrolling
Angular cdk Scrolling包给我们提供了一些指令和Service来应对滑动事件.推荐大家尽量去看官网上的介绍https://material.angular.io/cdk/scroll ...
Angular CDK Overlay 弹出覆盖物
为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...
源码分析 @angular/cdk 之 Portal
@angular/material 是 Angular 官方根据 Material Design 设计语言提供的 UI 库,开发人员在开发 UI 库时发现很多 UI 组件有着共同的逻辑,所以他们把这些 ...
源码分析 @angular/cdk 之 Portal 1
@angular/material 是 Angular 官方根据 Material Design 设计语言提供的 UI 库,开发人员在开发 UI 库时发现很多 UI 组件有着共同的逻辑,所以他们把这些 ...
angular跳转指定页面_通过 angular CDK 实现页面元素拖放
通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能,如元素在页面中随意拖动.在特定区域内拖动亦或对列表进行拖放排序等等. 通过 angular CDK 实现 ...
Angular CDK Layoout 检测断点
Angular CDK检测断点 Angular CDK有一个布局包,其服务可以轻松检测窗口大小并与媒体查询匹配.这使得你可以完全控制UI并适应不同的屏幕尺寸. 让我们快速了解一下如何使用CDK的布局模 ...
angular基础学习
angular基础学习核心一. angular环境搭建 1. 安装前准备: 1.1 安装nodejs 1.2 安装 cnpm, 尽量不要使用 1.3 使用npm/cnpm命令安装angular/c ...
Angular cdk 之 Overlay 源码分析
文章目录一.Overlay简介二.Overlay 源码阅读 2.1 OverlayConfig 浮层配置 2.2 OverlayContainer 浮层容器 2.3 Overlay 服务 2.3. ...
Angular的学习
Angular的学习 Angular的特性. MVC : 在前端引入了MVC的设计模式模块化开发自动的双向数据绑定 *语义化标签(自定义标签) 依赖注入其核心就是通过指令扩展了HTML,通过表达 ...

Angular cdk 学习之 Bidirectionality（bidi）