微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

绑定到上下文属性的 matInput 与 i18n 提取冲突,但不在常规服务上

如何解决绑定到上下文属性的 matInput 与 i18n 提取冲突,但不在常规服务上

我有一段反应式代码,它可以正确编译并且可以很好地与绑定的 matInput 指令一起执行,但是当我运行用于国际化的 angular cli 命令 (ng xi18n) 时,然后我收到以下错误 ERROR in Can't bind to 'matInput' since it isn't a kNown property of 'input'. 我不明白 i18n 提取上的错误,但不了解常规执行。当我删除 matInput 上的绑定时,它在 exec 和 i18n 提取上运行良好。

这就是我使用 matInput 绑定的原因(例如 [matInput]):在我的 ts 文件中,我为每个表单字段定义了一个上下文,告诉它是否需要指令({{1 }} 和 matInput) 并给出需要一个指令的值(requiredformControlNametype):

placeHolder

这允许我在 html 文件中只写一个 public myForm: FormGroup public emailContext: any public nameContext: any public passwordContext: any constructor(private fb: FormBuilder){ // Form creation this.myForm = this.fb.group({ email: [""],name: [""],password: [""],}) // Each input field will receive it's own context as a simple object: public emailContext = { controls: { formControlName: email,// value to give to the regular [formControlName] matInput: true,// true or false if we want apply or not matInput to the input required: true,// true or false if we want apply or not the required to the input type: "text",// value we want to pass to the regular [type] directive placeHolder: $localize`:"@@email:Email"`,// value to pass to the place holder } } public nameContext = { controls: { formControlName: name,matInput: true,required: false,type: "text",placeHolder: $localize`:"@@name:Name"`,} } public passwordContext = { controls: { formControlName: password,type: "password",placeHolder: $localize`:"@@city:City"`,} } ,我将在 ng-template调用它,为每个输入使用 ng-container 指令,在其中我提供相关的上下文对象包含有关给定表单字段指令的所有所需信息

ngTemplateOutlet

即使我从未见过绑定matInput,我也发现用上下文对象在ts文件中描述一个表单字段,然后将html文件简化为只有一个ng-template而不是重复的mat-form-领域。 但是,即使这在使用 <!-- Describes the input template with all binded directives to ts context object--> <ng-template #inputTemplate let-ctrl="controls"> <mat-form-field> <input [formControlName]="ctrl.formControlName" [matInput]="ctrl.matInput" [required]="ctrl.required" [type]="ctrl.type" [placeholder]="ctrl.placeHolder"> </mat-form-field> </ng-template> <ng-container *ngTemplateOutlet="inputTemplate ; context: emailCtx"></ng-container> <ng-container *ngTemplateOutlet="inputTemplate ; context: nameCtx"></ng-container> <ng-container *ngTemplateOutlet="inputTemplate ; context: passwordCtx"></ng-container> 定期执行时效果很好,但是当我运行 ng serve(用于编辑带有 placeHolders 的 xlf 文件以从 ts 文件转换时)时出现错误。>

  1. 是否“允许”以这种方式绑定 matInput,我的意思是同样的方式 我们是否应用带有 ng xi18n 的类?
  2. 即使这有效,我也不明白绑定是如何使 [class.my-class]="<boolean>"间的区别,意思是“需要申请 指令”和 [required]="true" 表示“将“文本”值赋予 类型指令”。因此,使用 ts 文件中描述的上下文,我如何将布尔值传递给驱动程序,而不仅仅是告诉它是否被应用,就像 [type]="text"
  3. 绑定的 [matInput] 怎么可能不是常规问题 服务并导致 i18n 提取崩溃?

解决方法

在 Angular 11 中,即使在服务和构建时,[matInput] 的属性绑定也会出错。此外,您不能在没有 matInput 指令的情况下使用带有输入的 mat-form-field 元素。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。