Question

我的应用程序似乎在使用JIT编译器时有效，但是当我尝试使用ng build --prod使用AOT编译器时，它会抛出错误：

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

如何确定此错误的来源？

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

我搜索了代码库，除了formButton之外，我找不到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>

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

Variable([Item])

Answer 1

IT部门会在您的代码中的某个位置<div formButton></div>搜索您的代码并将其删除

Answer 2

编辑：我和一个Angular团队成员交谈过，这是因为我的选择器没有指定一个元素。因此，当使用ng build --prod角度使用div作为“最低公分母”进行构建时：

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

所以有两种解决方案：

1）使选择器更具体，以便它只尝试使用具有disabled属性的元素进行AOT编译。

将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属性的存在，而不是它的值。

@HostBinding('disabled') disabledAttribute = false;

到

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

使用此模板：

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

Angular 6生成版本“无法绑定到'禁用'，因为它不是'div'的已知属性”

2 个答案: