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属性，我想要声明＆＃34;只需输入任何有效的CSS＆＃34;。

以上是这个问题：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}`
  }
}