在Angular 2

Question

我正在尝试使用以下Angular 2代码来动态更改div的不透明度。

html看起来像这样：

<div [style.opacity]="buttonOpacity" class="likes">
    <ion-icon name="ios-heart"></ion-icon>
      {{theMediaItem.liked}} &nbsp;
    <ion-icon name="close-circle"></ion-icon>
      {{theMediaItem.disliked}} &nbsp;
</div>

在我的Angular 2 ts文件中，我有：

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {

  buttonOpacity = 0.1;

  constructor(public nav : NavController) {

    this.buttonOpacity = 0.4;

  }
}

离子图标的不透明度不会发生变化。

Answer 1

使用您的代码，我认为值0.4是直接使用的，因为它是在构造函数中设置的。话虽如此，我认为您使用正确的方法将样式链接到类属性。

您可以尝试使用setTimeout来查看情况是否会动态变化：

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  buttonOpacity = 0.1;

  constructor(private cdr:ChangeDetectorRef, public nav : NavController) {
    setTimeout(() => {
      this.buttonOpacity = 0.4;
      this.cdr.detectChanges();
    });  
  }
}

Answer 2

使用 ngClass 要在Angular中添加/删除类，建议使用提供的模板语法。

您可以有类似这样的内容：

模板

html：

<button (click)="shouldShow = !shouldShow"> Show/Hide </button>
<label [ngClass]="{show: shouldShow, hide: !shouldShow}"> ... </label>

组件

//确保在组件中添加变量

public shouldShow = true;

当shouldShow变量从true更改为false时，标签将在显示/隐藏css类之间切换

要获得简单的淡入/淡出效果，可以添加以下 CSS ：

.show {
   opacity: 1;
   transition: opacity 1s;
}

.hide {
   opacity: 0;
   transition: opacity 1s;
}