使用内联 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，如本答案中所述，但这在我的情况下不会成功，因为我需要backgroundImage变量是动态的。

Answer 1

由于 Ionic2(或只是 Ionic(是建立在 Angular(不是 AngularJS(之上的，你可以这样做：

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

或

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