Добавить линейный градиент поверх динамического c фонового изображения в Angular 6

Question

У меня есть следующий код html, но он, похоже, не работает.

Я пытаюсь добавить линейный градиент через динамический c URL-адрес фонового изображения, используя Angular 6.

<header *ngIf="user?.backgroundPhotoUrl != null && user?.backgroundPhotoUrl !== ''"
    [style.background-image]="'linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('+ user?.backgroundPhotoUrl +')'">

Но он просто возвращается пустым. Любая помощь?

Answer 1

Взгляните на консоль браузера. Скорее всего, он будет содержать следующее Angular предупреждение:

ПРЕДУПРЕЖДЕНИЕ: очистка небезопасного значения стиля linear-gradient (rgba (0, 0, 0, 0.3), .... (см. http://g.co/ng/security#xss) ).

Если это так, Angular просто удалит ваше правило стиля, потому что команда Angular решила, что любая привязка настраиваемого стиля потенциально может быть вредной, т.е. когда значение будет получено из пользовательского ввода.

Вам нужно будет объявить правило ограниченного стиля как save, обернув это значение следующим образом:

<header [style]="headerStyle"> ...</header>

get headerStyle() {
    return this.sanitizer.bypassSecurityTrustStyle(
      ' background-image: linear-gradient(rgba(0, 0, 0, 0.7),  rgba(0, 0, 0, 0.3)),  url(' + this.backgroundPhotoUrl + '); '
    );
}

this.sanitizer внедрен DomSanitizer .