Сложные и множественные стили преобразования в угловых 2+ - PullRequest
Новая
       8

Сложные и множественные стили преобразования в угловых 2+

0 голосов
/ 07 мая 2018

Как добавить несколько встроенных стилей преобразования в угловых 2 +?

Это работает: 

[style.transform]="'rotate(45deg)'"

Но когда я добавляю более 1 стиля, он не работает: 

[style.transform]="'rotate(45deg) translateX(10px)'"

Где найти ссылку на поддерживаемую директиву style.*? Возможно ли что-то подобное? 

[style.transform.translateX.px] = "10"
[style.transform.rotate.deg] = "45"

1 Ответ

0 голосов
/ 08 мая 2018

Вот два метода, которые работают:

Метод 1 - Использование ngStyle: 

[ngStyle]="{'transform': 'rotate(45deg) translateX(10px)'}"

Метод 2 - Санитарная обработка значения, переданного в [style.transform]: 

[style.transform]="myTransform"

import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

get myTransform(): SafeStyle {
  return this._sanitizer.bypassSecurityTrustStyle("rotate(45deg) translateX(10px)");
}

См. этот стек стека .

<Ч />

Как уже упоминалось в вопросе, следующий синтаксис не работает (см. это демо ): 

[style.transform]="'rotate(45deg) translateX(10px)'"

Атрибут style удален из вывода HTML, и сработало это предупреждение:

ВНИМАНИЕ: дезинфекция небезопасного значения стиля rotate (45deg) translateX (10px) (см. http://g.co/ng/security#xss).

...