CSS динамическое значение в угловых - PullRequest
Новая
       22

CSS динамическое значение в угловых

0 голосов
/ 17 января 2019

Как получить CSS в строке для динамического рисования элемента HTML ?

Элемент HTML должен динамически отображать строку кода CSS. использование [style.etc], [ngStyle], [style], [ngStyle], [ng-class] не работает для меня, потому что я получаю строку с кодом CSS из бэкэнда, пример:

стиль: "background: red; color: white;"

Я не могу использовать следующее решение:

style: "{{style}}" nor [style] = "style" , потому что в консоли появляется предупреждение:

ВНИМАНИЕ: дезинфекция небезопасного стиля значения фона: сеть; цвет: белый; 

<button type="button"
  *ngFor="let controlHTML of buttons"
  style="{{controlHTML.attributes.style}}"> HelloWorld
</button>

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Вы также можете добавить: 

     [style.background-color]="'red'"
     [style.color]="'white'"

Если вы хотите получить цвет из какого-либо свойства в ts, удалите символы и передайте имя переменной, например, 

     [style.color]="somePropertyWIthPrimaryColor"
0 голосов
/ 17 января 2019

Создание метода для обхода санитарной обработки небезопасно позволит использовать строковый CSS 

        <button type="button"
            *ngFor="let controlHTML of buttons"
            [style]="trustedSecurity(controlHTML.attributes.style)"> HelloWorld
        </button>

кнопка проверки 

         <button type="button"              
           [style]="trustedSecurity(style)"> HelloWorld
         </button>

тестовый класс с методом санации небезопасного значения (css) 

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

 export class TestClass{

   style = "background: red; color: white;";

   constructor(private _sanitizer: DomSanitizer) {}

   trustedSecurity(style) {
      return this._sanitizer.bypassSecurityTrustStyle(style);
   }

}

Здесь вы можете прочитать о создании безопасных каналов.

https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

...