javascript - 为适应现有 Angular 应用程序的 RTL 而测试的方法

Question

如果您有一个现有的 Angular 应用程序，它已经可以进行本地化(即不同语言的文本加载)，如果其中之一是 RTL 方向(希伯来语/阿拉伯语等)，您将如何编写它的代码？

记住 仅更改那些 warpper/html 上的 dir="rtl"是不够的。例如，导航栏中的元素必须镜像并向右浮动。 弹出窗口(当您悬停元素时)需要改变方向，因此列表会继续。

为适应 RTL 而测试的方法:

1.

在我们的应用程序加载模块中加载应用程序之前设置文本方向(使用 app_initializer)

在该函数中，我们可以在 HTML 和 lang 上设置 dir 属性 基于用户的本地语言

稍后当我们引导我们的 Angular 应用程序时，我们可以查看该 html 属性

这 (1) 我喜欢并想继续做。

2.

在我们完成 1 个工作后，仅使用 css/less/sass 来改变网站的外观

那些样式(如我们所愿)只会应用于具有 rtl 方向的语言

但是当我们尝试旋转(镜像)导航链接(在标题中)并更改弹出窗口方向时，事情变得非常棘手。 html 中元素的顺序以及样式需要更改，并且对于某些组件来说更改很重要，因此我们尝试了方法 3。 我们仍然可以将这种方法与下一个方法结合使用(将它们结合起来)，所以这仍然很有用。

更具体地说，less 不起作用的是在包装元素上使用 dispaly: flex 结合 :nth-child(i) 顺序选择器:j； 在导航栏中旋转元素 只有像 float: right 这样的东西是成功的

也测试了一些 -webkit-转换:scaleY(-1)； 结合 display:inline-block;

3.

如果我们可以有一种简单的方法来指定我们将哪个 templateUrl 加载到组件中 然后我们可以为 A.component 提供一个 a.html 模板(默认 ltr 方向)和另一个 A-rtl.html 基于条件。
见前引用:

Angular 2 dynamic template url with string variable?

本质上将模板分成 2 个，但巨大的好处是我们可以拥有一次 .ts 代码

这会很棒，但我无法让它工作。 即使有可能，它似乎也会阻止 AOT 编译。 (或不？)
请参阅引用:(旧帖子但仍然相关)
https://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/

angular 官方文档方式 https://angular.io/guide/dynamic-component-loader

这是工作!问题是这不是我们想要的。在这种方法中，我们将单独的组件加载到一个 placeHolder 中，而不是单独的模板

4.

这种方法是在模板上使用 *ngIf 包装我们的 ltr(当前模板) 并在其下方添加一个单独的

在这种情况下会有一些重复，但这不是真正的代码(它是 HTML)它只是标记，而且像这样我们可以更好地控制事物的外观和位置，以及是否需要使用例如popover-rtl 组件而不是当前的 popover(它目前与 RTL 不兼容)我们可以轻松地做到这一点。

在这种方法中，有几种简单的方法可以确定每个组件是在 ltr 还是 rtl 文本方向上(对于 ngIf) 简而言之就是使用一个 baseComponent，或者一个服务。

注意:方法 3,4 都可以使用我们在 1 和 2 中所做的。

关于如何使方法 3 起作用的任何建议？

理想情况下，我可以获得一个条件来确定我应该为组件加载哪个 templateUrl，因此 .ts 中的代码适用于两者，只是标记不同。

如果可能，请建议 Annular 6+ 版本。

P.S 几乎每天都使用这个网站超过 10 年，这是我的第一个问题，请给我点赞 :)

谢谢!

Answer 1

虽然你的帖子已经过去了很长时间: 创建一个基础组件，它将包含所有逻辑。 根据您的喜好创建尽可能多的组件(一个用于 RTL，一个用于 LTR 等)。每个组件都将继承自基础组件。每个组件都有自己的 HTML 模板、样式等。 您可以通过路由、ngIf 或您需要的任何套件来选择要显示的组件。