使用内联CSS设置组件样式 - Ionic2,AngularJS

Question

我试图附加一个内联CSS规则来background-image使用类似的动态变量集constructor:

<div style="background-image: url('{{backgroundImage}}');">
  ...
</div>

然后在我的组件中:

export class SomeComponent {

  backgroundImage = '';

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.backgroundImage = 'https://unsplash.it/200/300' ; }

}

但是,当元素呈现到屏幕时,内省CSS规则将被省略.

我尝试使用Angular ng-style,但它返回"无法绑定到'ng-style',因为它不是'div'的已知属性".

我也尝试styles在我的@Component声明中设置,如本答案中所述,但这不会在我的情况下,因为我需要backgroundImage变量是动态的.

Answer 1

由于Ionic2(或者只是Ionic)是建立在Angular(不是AngularJS)之上的,所以你可以这样做:

<div [ngStyle]="{ background: 'url(' + backgroundImage + ')' }"></div>

要么

<div [style.background]="'url(' + backgroundImage + ')'"></div>