Angular 9 |无法绑定(bind)到 'loading'，因为它不是 'img' 的已知属性

Question

我正在使用 Angular 9，我很简单地尝试将 img 元素的属性“加载”绑定(bind)到 Angular 属性。如果我在开发模式下运行应用程序，但不是在 prod 模式下运行，这将有效。

在我的模板中，我有这个:

<img [src]="image" [loading]="loading" [alt]="title">

在组件中我有这个:

import { Component, OnInit, Input } from '@angular/core';

@Component(
{
    selector: 'image-card',
    templateUrl: './image-card.component.html',
    styleUrls: ['./image-card.component.scss'],
})
export class ImageCardComponent implements OnInit
{
    @Input() loading:"lazy" | "eager" = "lazy";
    @Input() title:string;
    @Input() image?:string;

    constructor() { }

    ngOnInit() 
    {
        this.image = this.image || "assets/images/default_image.jpg";
    }
}

这适用于开发构建/ng 服务，但如果我运行产品构建:

ng build --prod

我得到错误:

Can't bind to 'loading' since it isn't a known property of 'img'.

该属性存在， https://caniuse.com/#search=loading为什么我收到错误消息？

如何在产品构建中排除此验证/限制？

例如，alt 绑定(bind)工作正常，没有错误。

编辑:包括更好的代码示例。

Answer 1

loading图像的属性是相当新的，不是所有的浏览器都支持，Angular 也不支持。所以你应该尝试使用[attr.loading]="loading"语法，直到 Angular 将其视为原生 HTML 属性。

Angular 源代码中的相关行:https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L119