方向：rtl 不适用于角度材质卡？

Question

我正在使用有角度的材料卡，并且想让文本从右到左开始，所以我使用了 Direction: rtl;但这没用。 有什么帮助吗？ HTML 代码：

<mat-card class="example-card">
   <mat-card-header>
     <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>
         <button class="profilrButton" (click)="viewProfile(post.uid)">{{post.fullName}}</button>
        </mat-card-title>
        <mat-card-subtitle>
          <p wrapper>{{post.title}} </p>
        </mat-card-subtitle>
      <mat-card-subtitle style="float: right;font-size: 8pt">{{arr[ind]['date']}}</mat-card-subtitle>
  </mat-card-header>

  <img mat-card-image src={{post.imageURL}} alt="Photo of a Shiba Inu">
  <mat-card-content>
     <p [class]="(hasArabic(post.description))? 'pre rtl':'pre'">
       {{post.description}}
     </p>
  </mat-card-content>
  <mat-card-actions>
     <button class="classA" (click)="approve(post.key,ind)" mat-button>Accept</button>
     <button class="classR" (click)="delete(post.key,ind)" mat-button>Reject</button>
  </mat-card-actions>
</mat-card>

CSS

.pre{
 white-space: pre-line;
}
.rtl{
 direction: rtl;
}

Answer 1

我相信 Material 使用

dir

属性多于

direction

样式。尝试：

  <mat-card-content>
     <p [dir]="(hasArabic(post.description)) ? 'rtl' : 'auto'" class="pre">
       {{post.description}}
     </p>
  </mat-card-content>

您可能还想阅读双向模块，但我认为这更适合您自己的材质组件使用的自定义组件。

Answer 2

这是因为 Angular Material 组件不知道 css 的变化，它依赖于 @angular/cdk/bidi 的 Directionality 服务来了解方向的变化。

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

constructor(private dir: Directionality) { }

changeLanguageToRTL() {
  document.body.setAttribute('dir', 'rtl');
  
  // Notify Material components of the change
  (this.dir as any).value = 'rtl';