Question

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

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

和html代码的一部分：

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

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

Answer 1

您需要使用翻译服务的即时功能将其翻译为.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>

Answer 2

我认为不需要上述ts文件的工作。我也尝试过，但是对我没有用。
en.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>

Answer 3

就像InnerHTML一样简单。例如：

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

Answer 4

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

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

ngx转换角度，如何将html格式的文本传递给占位符属性

4 个答案: