Angular（4 或 2）如果满足条件则应用 CSS

Question

我找到了一些代码示例，它们解释了在满足条件的情况下如何应用 class 项目。

在我的 .ts 文件中有以下内容：

private readNews : boolean = false;

[..]

  ngOnInit() {
    localStorage.setItem('readNews', 'Read');

    if (localStorage.getItem('readNews') != null || '') {
      this.readNews = true;
    }
  }

在我的 HTML 中，我有以下内联 CSS:

<i class="fal fa-cogs fa-5x"></i>

但是，我想要的是：

如果this.readNews === true

<i class="fal fa-cogs fa-5x blink"></i>

所以需要在读取新闻（保存在localStorage中）的CSS中添加'blink'。

Answer 1

<i [class.blink]="readNews"></i>

基于作弊 sheet https://angular.io/guide/cheatsheet

Answer 2

像这样尝试：

<i [ngClass]="readNews ? 'fal fa-cogs fa-5x blink': 'fal fa-cogs fa-5x'"></i>

Answer 3

使用ngClass

<i [ngClass]="(readNews == 'Read')? 'fal fa-cogs fa-5x blink':'fal fa-cogs fa-5x'" ></i>

或者您可以调用自定义函数

[ngClass]="getClass()"

getClass(flag:string) {
  let cssClasses;
  if(localStorage.getItem('readNews') == 'Read') {  
     cssClasses = {
       'fal': true,
       'fa-cogs': true,
       'fa-5x': true,
       'blink': true
     }  
  } else {  
     cssClasses = {
       'fal': true,
       'fa-cogs': true,
       'fa-5x': true,
       'blink': false
     }  
  }
  return cssClasses;
}

Answer 4

在HTML中：

<i *ngIf="readNews" class="fal fa-cogs fa-5x"></i>
<i *ngIf="!readNews" class="fal fa-cogs fa-5x blink"></i>

在打字稿中，我会重构为这样以提高可读性：

ngOnInit() {
localStorage.setItem('readNews', 'Read');
this.readNews = (localStorage.getItem('readNews') != null || '');

}

Angular（4 或 2）如果满足条件则应用 CSS

Angular (4 or 2) apply CSS if conditions are met

html

css

ng-class

angular