ngx translate angular，如何将html格式的文本传递到占位符属性上

Question

我有以下问题。我的翻译键是这样的。

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

和部分html代码

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

现在，如果我想有html格式，我怎么能把一个键传给占位符呢？目前，在我的输入中，我可以看到这样的文字。Lorem < strong > ipsum < strong > 。

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>