使用内联 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，但它返回“无法绑定到 '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>