如何将 Angular HTML 文件的默认定位从 "left-to-right" 更改为 "right-to-left"？

Question

我想知道是否有办法将 Angular HTML 文件的默认定位从 "left-to-right" 更改为 "right-to-left"？

如果没有办法，最好的方法是什么？

我想在创建 HTML 视图时从右到左对元素的位置进行查看。

Answer 1

在您的父 html 元素上，您可以将 CSS flexbox layout 与 flex-direction: row-reverse 结合使用。

.container {
  display: flex; 
  flex-direction: row-reverse;
}

请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 以获得有关 CSS flexbox 布局的详细信息。

Answer 2

是的，有。您需要设置direction attribute：dir="textDir"

其中 textDir 可以有以下值：

ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);

rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);

auto, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

示例：

<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>

<hr>

<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>

Answer 3

在您的模块中导入 flexLayoutModule。

从“@angular/flex-layout”导入 { FlexLayoutModule}；

<div dir="ltr" fxLayoutGap="20px"> 左对齐。

<div dir="rtl" fxLayoutGap="20px"> 右对齐。

更多详情，请访问

[https://tburleson-layouts-demos.firebaseapp.com/#/docs][1]

如何将 Angular HTML 文件的默认定位从 "left-to-right" 更改为 "right-to-left"？

How to change the default positioning of Angular HTML files from "left-to-right" to "right-to-left"?

html

right-to-left

angular