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 {Sub ion} from \"rxjs\";

@Component({
    selector: \'app-cdk-bidi\',
    templateUrl: \'./cdk-bidi.component.html\',
    styleUrls: [\'./cdk-bidi.component.less\']
})
export class CdkBidiComponent implements OnDestroy {
    private _dirChangeSub ion = Sub ion.EMPTY;

    constructor(
        @Inject(DIR_DOCUMENT) public dirDoc: any,
        public directionality: Directionality
    ) {
        this._dirChangeSub ion = directionality.change.subscribe(() => {
            console.log(\'bbb\');
        });
    }


    ngOnDestroy() {
        this._dirChangeSub ion.unsubscribe();
    }
}

常规Service的用法

二 Dir

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

       Selector: [dir]

       Exported as: dir

2.1 Dir指令属性

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