Что плохого в привязке этого свойства в Angular4 при использовании его в свойстве стиля? - PullRequest
Новая
       9

Что плохого в привязке этого свойства в Angular4 при использовании его в свойстве стиля?

0 голосов
/ 16 сентября 2018

В Angular4, привязка свойства в представлении (.html) выбирает значение из файла логики (.ts)

Это хорошо работает в коде: 

<img [src]="sourceValue">

Это тоже хорошо работает в коде: 

<button [disabled]="isDisabled">

Почему это не работает?

<p [style]="paragraphStyle"> This is a paragraph.</p>

abc.component.ts 

isDisabled:boolean = true; 
sourceValue:string = "./assets/hermione.jpg"; 
paragraphStyle:string = "background:red; color:yellow";

Я знаю использование ngStyles и ngClass ,Я просто хочу спросить, почему привязка свойств не работает в вышеуказанном случае.Наконец, это просто - «Inline CSS Styling», если значение берется из файла .ts и добавляется в фрагмент html перед свойством «style» в абзаце.

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Это из-за мер безопасности:

@Angular docs
Angular определяет следующие контексты безопасности:

  • HTMLиспользуется при интерпретации значения как HTML, например, когда
    привязка к innerHtml.
  • Стиль используется при привязке CSS к свойству стиля.

  • URL-адрес используется для свойств URL-адреса, например <a href>.

  • Ресурсный URL-адрес - это URL-адрес, который будет загружен и выполнен в виде кода, например, в <script src>.

Исправление заключается в предварительной очистке значений с использованием bypassSecurityTrustStyle() - Обход защиты и доверие к указанному значению как к безопасному значению стиля (CSS).

@Angular docs

ВНИМАНИЕ: вызов этого метода с использованием ненадежных пользовательских данных подвергает ваше приложение угрозам безопасности XSS!

Компонент: 

import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  paragraphStyle;
constructor(private _sanitizer: DomSanitizer){ 

  this.paragraphStyle=this._sanitizer.bypassSecurityTrustStyle("background-color:red");
}

HTML 

<p [style]="paragraphStyle"> This is a paragraph.</p>

ПРИМЕЧАНИЕ:

Для стилИмя свойства используйте dash-case.Например, font-weight, background-color

Live Demo

0 голосов
/ 16 сентября 2018

Я думаю, что вы можете сделать это, но вы должны сделать это так: [style.background]="'red'"

...