Angular 9 | Невозможно привязать к «загрузке», так как это не известное свойство «img» - PullRequest
Новая
       58

Angular 9 | Невозможно привязать к «загрузке», так как это не известное свойство «img»

0 голосов
/ 05 марта 2020

Я использую Angular 9, и я просто пытаюсь связать атрибут "загрузка" элемента img со свойством 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";
    }
}

Это работает на dev build / ng serve, но если я запускаю сборку prod: 

ng build --prod

Я получаю ошибку:

Может ' t привязка к 'loading', так как это не известное свойство 'img'.

Свойство существует, https://caniuse.com/#search = загрузка почему я получаю ошибку ?

Как я могу исключить эту проверку / ограничение для сборки prod?

Например, alt bind работает без ошибок.

РЕДАКТИРОВАТЬ: включить лучшие примеры кода .

1 Ответ

0 голосов
/ 05 марта 2020

Атрибут 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

...