Angular2 [style.boxShadow] mit mehreren Schatten nicht

Question

Arbeits Ich habe die folgende Komponente:

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [style.backgroundColor]="backgroundColor" 
     [style.boxShadow]="boxShadow"> 
     <h2>Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    backgroundColor = 'red'; 
    boxShadow = '0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);' 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Die backgroundColor funktioniert gut, aber die boxShadow nicht angewendet werden, wenn es Komma mehrere Werte getrennt. Gibt es eine Möglichkeit, dies zum Funktionieren zu bringen? Ich wollte den Benutzer die box-shadow Eigenschaft wählen lassen, und das möchte ich behaupten "gib einfach ein gültiges CSS ein".

Hier ist der Plunker: https://embed.plnkr.co/IEGPshB3FcB1QoZDp018/

Answer 1

prüfen diese es

https://plnkr.co/edit/XmunNluzwYnxFQw8gD5q?p=preview

export class App { 
    name:string; 
    backgroundColor = 'red'; 
    boxShadow = '10px 10px 5px #888888' //you can try with this also -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
}