ngx翻译角度，如何将html格式的文本传递给占位符属性答案

【问题标题】：ngx translate angular, how to pass html formatted text to placeholder attributengx翻译角度，如何将html格式的文本传递给占位符属性
【发布时间】：2022-03-17 21:39:03
【问题描述】：

我有以下问题。我的翻译键如下所示：

{
  "key": 'Lorem <strong>inpsum</strong>'
}

还有部分html代码：

<form>
  <input [placeholder]="'key | translate'">
</form>

现在，如果我想要 html 格式，如何将密钥传递给占位符？目前在我的输入中我可以看到文本：Lorem ipsum。

【问题讨论】：

让我们把 ngx-translate 放在一边。如何在纯 html 中添加格式化占位符？
以 css 为例。但在这里我想为字符串的某些部分添加格式
但是我们谈论的是 HTML 标签。如何在占位符中提供 HTML 标记，使它们不会以纯文本形式显示？你能分享一段这样的代码让我重现它吗？
在 Angular 中你可以使用 [innerHTML] stackblitz.com/edit/ngx-translate-translated-placeholder
我知道，但这对占位符没有帮助。我只想说即使在纯 HTML 中也无法添加标记占位符。所以在Angular中也不可能。除非您创建一些自定义输入组件。

标签： angular ngx-translate

【解决方案1】：

就像InnerHTML 一样简单。例如：

<input placeholder="{{'key' | translate}}">

【讨论】：

【解决方案2】：

您需要使用翻译服务的instant 功能将其翻译到您的.ts 文件中，并将其保存在一个变量中。然后你应该从这个变量中访问它。

import { TranslateService } from '@ngx-translate/core';

[...]

constructor(
  private readonly translateService: TranslateService,
) { }

keyTranslated = '';

ngOnInit() {
  this.keyTranslated = this.translateService.instant('key');
}

然后在你的html中你可以写：

<form>
  <input [placeholder]=keyTranslated>
</form>

【讨论】：

感谢您在代码旁边提供基本解释。这是许多新贡献者忽略的事情。干得好！

【解决方案3】：

我认为不需要上述 ts 文件的工作。我也尝试过，但对我没有用。
zh.json

{
  "app-name":  "App Name",
  "sign-in": {
     "user-name": "User Name",
     "user-name-placeholder": "Enter user name"
   }
}

在你的组件模板中：

    <div class="row form-group mb-3">              
       <label for="userName" class="col-md-4 align-self-center">{{ 'sign-in.user-name' | translate }}</label>        
       <div class="col-md-8"> 
          <div class="input-group">
             <div class="input-group-prepend">
                 <span class="input-group-text">
                    <i class="fa fa-phone"></i>
                 </span>
              </div>    
             <input type="text" class="form-control" name="userName" formControlName="userName" [placeholder]="'sign-in.user-name-placeholder' | translate" />                                        
          </div>
       </div>
   </div>

【讨论】：

【解决方案4】：

对于占位符、值等中的完全动态值，您可以使用它。 myobj.selectedText 来自 .ts 文件 而 FIELDS.SUBJECT_TEXT 来自 translation(eg. fr.json) 文件强>。

<input type="text" class="form-control" 
  [placeholder]="myobj.selectedText + ' ' + ('FIELDS.SUBJECT_TEXT' | translate)"
  [value]="myobj.selectedText + ' ' + ('FIELDS.SUBJECT_TEXT' | translate)" >

【讨论】：

【解决方案5】：

我就是这样解决的：

<input [placeholder]="'key' | translate">

【讨论】：