Angular cdk 学习之 Bidirectionality（bidi）

落日映苍穹つ 2022-04-08 16:45 132阅读 0赞

cdk Bidirectionality提供给我们的功能，就是用来设置布局方向。更加详细的内容可以参考官网 [https://material.angular.io/cdk/bidi/overview][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指令属性 ##

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

## 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][https_github.com_tuacy_angular-cdk-study]

[https_material.angular.io_cdk_bidi_overview]: https://material.angular.io/cdk/bidi/overview
[https_github.com_tuacy_angular-cdk-study]: https://github.com/tuacy/angular-cdk-study