如何将 angular 5 指令中的翻译字符串作为属性值传递？答案

【问题标题】：How to pass translation string in angular 5 directive as an attribute value?如何将 angular 5 指令中的翻译字符串作为属性值传递？
【发布时间】：2018-03-25 15:00:41
【问题描述】：

我为Read More 创建了一个简单的角度指令。要使用该指令，我编写了以下代码

<p [readMore]="profile?.profileSummary" [length]="100" 
   [showMoreText]="{{ 'SHOW_MORE' | translate }}" 
   [showLessText]="{{ 'SHOW_LESS' | translate }}">
{{profile?.profileSummary}}</p>

但是这个模板没有被解析，因为我将翻译键作为属性值传递，但是当我将唯一的字符串传递给它时它工作正常。

如何将翻译键传递给 Angular 指令中的属性值？

【问题讨论】：

我认为真正的问题是你的指令在哪里。我在任何地方都看不到它。我能看到的只是输入。您可能正在使用 input 属性作为指令选择器。你能澄清一下吗？
@user3492940 在上述情况下，readMore 是指令，我将其用作指令选择器的输入属性。
那么请尝试@Fetraij 提出的答案。哪个使用没有插值的属性绑定：[showMoreText]="'SHOW_MORE' | translate"
@user3492940 是的，它的作品！我已经将其标记为已接受的答案。谢谢！

标签： angular typescript ionic3 angular-directive ngx-translate

【解决方案1】：

你可以通过属性绑定来做到这一点：

 [showMoreText]="'SHOW_MORE' | translate "

或使用插值：

 showMoreText="{{ 'SHOW_MORE' | translate }}"

在official doc 中阅读有关属性绑定或插值的详细信息

【讨论】：

属性绑定将是可行的方法，在这种情况下进行插值是没有意义的。