时间戳

首页 > 解决方案 > 绑定到上下文属性的 matInput 与 i18n 提取冲突，但不是在常规服务上

angular - 绑定到上下文属性的 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绑定（so as [matInput]）的原因：在我的 ts 文件中，我为每个表单字段定义了一个上下文，告诉它是否需要指令（matInput和required），并给出需要一个指令的值formControlName（type和placeHolder):

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,
      matInput: true,
      required: false,
      type: "password",
      placeHolder: $localize`:"@@city:City"`,
    }
  }

这允许我在 html 文件中只编写一个ng-template我将在每个输入ng-container的ngTemplateOutlet指令中调用的文件，其中我为相关上下文对象提供有关给定表单字段的指令的所有所需信息

<!-- 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>

即使我从未见过 matInput 绑定，我发现用上下文对象在 ts 文件中描述一个表单字段是很优雅的，然后只用一个 ng-template 而不是重复的 mat-form-fields 来简化 html 文件。但是，即使这在定期执行时效果很好，ng serve然后我在运行时出现错误ng xi18n（用于使用 placeHolders 编辑 xlf 文件以从 ts 文件转换）。

  1. 这是否“允许”以这种方式绑定 matInput ，我的意思是我们以同样的方式应用或不使用[class.my-class]="<boolean>"?
  2. 即使这可行，我也不明白绑定如何区分[required]="true"“应用所需指令”和[type]="text"“将“文本”值赋予类型指令”。因此，使用 ts 文件中描述的上下文，我怎么能将布尔值传递给指令，而不仅仅是告诉它在[class.my-class]="<boolean>"
  3. 绑定的 [matInput] 怎么可能不会成为常规发球的问题并导致 i18n 提取崩溃？

标签： angularinternationalizationdirectiveangular-i18nangular-input

解决方案

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

推荐阅读