angular样式绑定

总结angular中的几种样式绑定方法，先上代码，自定义组件tabbar

<ul [ngStyle]="{ 'background-color': backgroundColor }">
  <li *ngFor="let menu of menus; let i = index ; let even = even; let odd = odd" 
      [ngClass]="{ even: even, odd: odd }"
    >
    <br>
    <a href="#" [class.active]="i === selectedIndex" (click)="handleSelection(i)">
      {{ menu.title }}
    </a>
    <br>
    <a href="#" [ngStyle]="{ color: i === selectedIndex ? titleActiveColor : titleColor }" (click)="handleSelection(i)">
      {{ menu.title }}
    </a>
    <span class="indicator" *ngIf="i === selectedIndex "></span>

  </li>
</ul>

运行效果如下：

 1.直接用class绑定样式 如下划线的实现

  <span class="indicator" *ngIf="i === selectedIndex "></span>

.indicator {
  background-color: gray;
  height: 2px;
  width: 2rem;
  margin-top: 2px;
}

2.[class.]的方式实现 

[class.active]="i === selectedIndex"

后面双引号中可以是变量，可以是表达式。如果是ture就实现.active的css样式

.active {
  color: red;
}

可以看到上面一行tabbar选中状态为红色

3.[ngstyle]方式

    <a href="#" [ngStyle]="{ color: i === selectedIndex ? titleActiveColor : titleColor }" (click)="handleSelection(i)">
      {{ menu.title }}
    </a>

//作为属性初值 传给组件
<app-scrollable-tab [menus]="topMenus" backgroundColor="green" titleColor="#fff" tilteActiveColor="yellow"
  (tabSelected)="handleTabSelected($event)">
</app-scrollable-tab>

后面可以添加对象，css样式的对象，比如字体颜色color 冒号后面可以写表达式或者变量，这里选中给titleActiveColor ,未选中给titleColor，可以看到下面的tabbar 选中黄色 未选中白色

4.[ngClass]方式。对象中可以写多个key，key对应的就是css样式 冒号后面为布尔值，即多个样式哪个为true加载哪个css样式

  <li *ngFor="let menu of menus; let i = index ; let even = even; let odd = odd" 
      [ngClass]="{ even: even, odd: odd }"
   >
//样式 css
.even {
  font-weight: 900;
}
.odd {
  font-weight: 100;
}

可以看到偶数粗，奇数细。最终效果如图

源代码下载：请大家自行切换到对应分支

https://github.com/lee727n/angularLearning