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

Posted 2023-03-06

【中文标题】使用内联 CSS 为组件设计样式 - Ionic2、AngularJS

【英文标题】：Styling components with inline CSS - Ionic2, AngularJS

【发布时间】：2017-11-19 22:22:15

【问题描述】：

我正在尝试使用 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 变量是动态的。

【参考方案1】：

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

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

或

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

【讨论】：

第二个在 Ionic 3 上为我工作，作为 [style.borderColor]="stat.color" 没有插值。谢谢

很高兴听到@Ruffo :)