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）