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

Question

我运行了这个命令 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'">