css - 使用内联 CSS 设计组件样式 - Ionic2、AngularJS

Question

我正在尝试使用 constructor 中设置的动态变量为 background-image 附加一个内联 CSS 规则，如下所示:

<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，但它返回“无法绑定(bind)到 'ng-style'，因为它不是 'div' 的已知属性”。

我还尝试在我的 @Component 声明中设置 styles，如 this answer 中所述，但这在我的情况下行不通，因为我需要 backgroundImage 变量是动态的。

Answer 1

由于 Ionic2(或只是 Ionic)构建于 Angular(而非 AngularJS)之上，您可以这样做:

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

或

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