首页 文章

在输入属性中使用管道

提问于
浏览 次
2

我正在使用UI框架：SmartAdmin

这提供了 i18n 的国际化功能

我正在尝试使用这个Boostrap验证模块 .

如果我把它，它的工作：

<input type="text" class="form-control" name="firstname" data-bv-notempty="true" 
 data-bv-notempty-message="The first name is required and cannot be empty"
 data-bv-stringlength-max="50" data-bv-stringlength-message="The first name must be less than 50 characters long"/>

但我尝试使用管道：

<input type="text" class="form-control" name="firstname" data-bv-notempty="true" 
data-bv-notempty-message="{{'The first name is required and cannot be empty' | i18n}}"
data-bv-stringlength-max="50" data-bv-stringlength-message="The first name must be less than 50 characters long" />

我收到此错误：

无法绑定到'data-bv-notempty-message'，因为它不是'input'的已知属性 . （“ut type =”text“class =”form-control“name =”firstname“data-bv-notempty =”true“[ERROR - >] [data-bv-notempty-message] =”'名字是required'| i18n“data-bv-stri”）：ng：///UserModule/UserAccountComponent.html@66:22

问题：如何在输入属性中使用管道？

编辑：添加代码管道：

import { Pipe, PipeTransform } from '@angular/core';
import {I18nService} from "./i18n.service";

@Pipe({
  name: 'i18n',
  pure: false
})
export class I18nPipe implements PipeTransform {

  constructor(public i18nService: I18nService){}

  transform(phrase: any, args?: any): any {
    //console.log(phrase)
    return this.i18nService.getTranslation(phrase);
  }

}

方法：getTranslation（）

public getTranslation(phrase:string):string {
    return this.data && this.data[phrase] ? this.data[phrase] : phrase;
}
angular

1 回答

  • 2

    它抛出一个错误，因为Angular不理解该属性名称 . 要允许自定义属性在角度上下文之外工作，您可以考虑添加 CUSTOM_ELEMENTS_SCHEMA 元素，这将是HTML上的任何其他自定义属性 .

    import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [ ... ],
  exports: [ ... ],
  imports: [ ... ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}

    你也可以像 [attr.something]="value" 一样使用属性绑定

    [attr.data-bv-notempty-message]="'The first name is required and cannot be empty' | i18n"
    回复于

相关问题