Angular 6生产版本“无法绑定到“已禁用"，因为它不是"div"的已知属性". [英] Angular 6 production build "Can't bind to 'disabled' since it isn't a known property of 'div'"

问题描述

使用JIT编译器时，我的应用程序似乎可以运行，但是当我尝试使用ng build --prod使用AOT编译器时，它将引发错误:

My app seems to work when using the JIT compiler, but when I attempt to use AOT compiler using ng build --prod then it throws an error:

ERROR in : Can't bind to 'disabled' since it isn't a known property of 'div'. ("[ERROR ->]<div formButton></div>")

如何确定此错误来自何处?

How do I figure out where this error is coming from?

我只是添加了延迟加载的功能模块，而不是将所有内容都导入到app.module.ts中，我不知道是否需要将FormButtonComponent导入到功能模块中?

I just added lazy loaded feature modules instead of importing everything in the app.module.ts and I don't know if I need to import FormButtonComponent into the feature modules?

我已经遍历了代码库，找不到除button以外的任何formButton实例.

I've searched through the codebase and I can't find any instances where formButton is on anything but a button.

这里是button.component.ts:

import { Component, HostBinding, Input, OnChanges, SimpleChanges } from "@angular/core";

/**
 * Button with loading and disabled states
 */
@Component({
    moduleId: module.id,
    selector: '[formButton]',
    templateUrl: 'button.component.html'
})
export class FormButtonComponent implements OnChanges {
    @Input() loading? = false;
    @Input() disabled? = false;
    @HostBinding('disabled') disabledAttribute = false;

    ngOnChanges(changes: SimpleChanges): void {
        this.updateState();
    }

    updateState(): void {
        this.disabledAttribute = this.disabled || this.loading;
    }
}

button.component.html

<ng-content></ng-content>
<spinner [size]="small" *ngIf="loading"></spinner>

以下是我应用中其他位置的一些示例调用:

Here's a few example calls from other places in my app:

<button formButton [loading]="template.loading" [disabled]="disabled" class="button" type="submit">Design</button>

<button formButton class="button" [loading]="form.disabled" (click)="save()">Change Password</button>

<button formButton [ngClass]="buttonClass" (click)="upload()" [loading]="uploaderWrapper.isUploading">{{ buttonText }}</button>

推荐答案

我与一位Angular团队成员进行了交谈，这是由于我的选择器未指定元素而引起的.因此，在使用ng build --prod角进行构建时，将div用作最低公分母":

I talked with one of the Angular team members and this is caused by the fact that my selector didn't specify an element. So when building with ng build --prod angular uses div as the "lowest common denominator":

您看到的错误是因为div是最常见的错误 HTML元素的分母.如果组件选择器未指定 任何其他元素类型，则它将成为div.

the error you see refers to because divs are the lowest common denominator of HTML element. If a component selector doesn't specify any other element type, then it becomes a div.

因此，有两种解决方案:

So there are two solutions:

1)使选择器更具体，使其仅尝试使用具有disabled属性的元素进行AOT编译.

1) make the selector more specific so that it only tries to AOT compile with an element that has the disabled property.

将selector: '[formButton]'更新为selector: 'button[formButton]'

@Component({
    moduleId: module.id,
    selector: 'button[formButton]',
    templateUrl: 'button.component.html'
})

2)更新为使用attr.disabled而不是disabled.缺点是您必须使用value | null而不是true | false，因为浏览器会查找disabled属性的存在，而不是它的值.

2) update to use attr.disabled instead of disabled. The downside to this is that you have to then use value | null instead of true | false because browsers look for the presence of the disabled attribute and not what it's value is.

@HostBinding('disabled') disabledAttribute = false;

到

@HostBinding('attr.disabled') disabledAttribute = false;

使用此模板:

<ng-content></ng-content>
<spinner [size]="small" *ngIf="loading"></spinner>

这篇关于Angular 6生产版本“无法绑定到“已禁用"，因为它不是"div"的已知属性".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！