Angular2 [style.boxShadow]複数の影が

Question

を働いていないと私は、次のコンポーネントがあります。

//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 {} 

backgroundColorが正常に動作しますが、カンマは複数の値が離れている場合boxShadowは適用されません。この仕事をする方法はありますか？私はユーザーにbox-shadowプロパティを選択させたいと思っていました。私は "ただちに有効なCSSを入力してください"と主張したいと思います。私はdownvoteの理由を知ることができるhttps://embed.plnkr.co/IEGPshB3FcB1QoZDp018/

Answer 1

チェックそれは

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}` 
    } 
}