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

Question

我使用的是有角度的材料卡，想让文本从右向左开始，所以我使用了方向：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>

您可能还想了解双向模块，但我认为这更多地适用于Material组件使用的自定义组件。

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';