通过 angular-cli 的 AOT 编译错误，与 HTML 属性 data-on-color 冲突

Question

我运行这个 cmd ng build --prod，但是我得到了这个错误 Property 'brand' does not exist on type。

不知道为什么 data-on-color="brand" HTML 属性与此相关。

我试图将所有 data-on-color="brand" 重命名为其他名称。例如。 data-lon-color="brand" 然后 AOT 编译工作。

下面是文件 /theme/angular/default/src/app/theme/pages/components/base/base-bootstrap-notify/base-bootstrap-notify.component.html 的内容，如错误中所述。

<div class="form-group m-form__group row">
            <label class="col-form-label col-lg-3 col-sm-12">
                URL Clickable
            </label>
            <div class="col-lg-4 col-md-9 col-sm-12">
                <input data-switch="true" type="checkbox" data-on-color="brand"  id="m_notify_url">
            </div>
        </div>
        <div class="form-group m-form__group row">
            <label class="col-form-label col-lg-3 col-sm-12">
                Allow dismiss
            </label>
            <div class="col-lg-4 col-md-9 col-sm-12">
                <input data-switch="true" type="checkbox" checked data-on-color="brand"  id="m_notify_dismiss">
            </div>
        </div>
        <div class="form-group m-form__group row">
            <label class="col-form-label col-lg-3 col-sm-12">
                Pause on hover
            </label>
            <div class="col-lg-4 col-md-9 col-sm-12">
                <input data-switch="true" type="checkbox" data-on-color="brand" id="m_notify_pause">
            </div>
        </div>

下面是.ts文件BaseBootstrapNotifyComponent

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {ScriptLoaderService} from '../../../../../_services/script-loader.service';


@Component({
    selector: "app-base-bootstrap-notify",
    templateUrl: "./base-bootstrap-notify.component.html",
    styleUrls: ["./base-bootstrap-notify.component.scss"],
    encapsulation: ViewEncapsulation.None,
})
export class BaseBootstrapNotifyComponent implements OnInit {

    constructor(private _script: ScriptLoaderService) {
    }

    ngOnInit() {
    }

    ngAfterViewInit() {
        this._script.load('app-base-bootstrap-notify',
            'assets/demo/default/custom/components/base/bootstrap-notify.js');

    }

}

Answer 1

Angular normalizes 解析模板时的属性名

private _normalizeAttributeName(attrName: string): string {
  return /^data-/i.test(attrName) ? attrName.substring(5) : attrName;
}

所以你的字符串变成了

<input on-color="brand">

注意：甚至<div data-*ngIf="3">Hello</div>也可以正常工作。

那么angular有两个选项可以声明事件

1) (event)

2) on-event

因此 angular 认为您使用 color 名称声明了输出事件

<input (color)="brand">

对于 aot，您必须在组件中声明处理程序 brand。

解决方法

<input [attr.data-on-color]="'brand'">

通过 angular-cli 的 AOT 编译错误，与 HTML 属性 data-on-color 冲突

AOT compile error via angular-cli, conflict with HTML attribute data-on-color

angular2-aot

angular