问题描述
我有一段反应式代码,它可以正确编译并且可以很好地与绑定的 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
) 并给出需要一个指令的值(required
、formControlName
和 type
):
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 文件转换时)时出现错误。>
- 是否“允许”以这种方式绑定 matInput,我的意思是同样的方式
我们是否应用带有
ng xi18n
的类? - 即使这有效,我也不明白绑定是如何使
[class.my-class]="<boolean>"
之间的区别,意思是“需要申请 指令”和[required]="true"
表示“将“文本”值赋予 类型指令”。因此,使用 ts 文件中描述的上下文,我如何将布尔值传递给驱动程序,而不仅仅是告诉它是否被应用,就像[type]="text"
- 绑定的 [matInput] 怎么可能不是常规问题 服务并导致 i18n 提取崩溃?
解决方法
在 Angular 11 中,即使在服务和构建时,[matInput] 的属性绑定也会出错。此外,您不能在没有 matInput 指令的情况下使用带有输入的 mat-form-field 元素。