Question

我试图在我的模板中使用CSS3动画，但我试图找到一个使用(click)='function()'添加和删除类的方法，如jQuery方式。

问题是如何在Angular 2中执行下面的jQuery函数？

这就是我SharedService目前的情况。我相信您无法在服务中使用Renderer角度核心组件。这是在服务中的原因是其他组件可以使用它。

openBasketView() {
 $('#basketView').removeClass('fadeOutRight');
 $('#basketView').addClass('fadeInRight');
}
closeBasketView() {
 $('#basketView').removeClass('fadeInRight');
 $('#basketView').addClass('fadeOutRight');
}

而不是使用类似的东西 - 我喜欢在function事件中使用(click)更好和可读，因为所有逻辑都在块函数中。

组件布尔

public showThis: Boolean = false;

模板视图

<div class="basket animated" [ngClass]="{'myClass': showThis}"> </div>
<button (click)="showThis = !showThis"></button>

Answer 1

您应该使用以下代码

<div class="basket" [class.fadeOutRight]="showThis" [class.fadeInRight]="!showThis">
<div (click)="showThis = !showThis"></div>

更新1：

<div class="basket" [ngClass]="getClass()">

getClass() {
   if(this.showThis)
        return 'fadeOutRight';
   else 
       retun 'fadeInRight'
}

<div [ngClass]="{ 'c1, c2, c3' : true, 'fadeOutRight' : showThis, 'fadeInRight' : !showThis }

更新2：

将数组中的类作为

classes:string[] = ['basket', 'animated']
<div [ngClass]="classes></div>


 <button (click)="toggleClass()"></button>

toggleClass(){
    this.classes.splice(this.classes.length-1,1); // removes the class 
    this.show=!this.show;
    if(this.show) {
        this.classes.push('fadeOutRight')
     }else {
        this.classes.push('fadeInRight')
     }

<强> LIVE DEMO

Answer 2

如果显示逻辑位于组件中注入的服务中，则可以从模板调用服务以添加切换类。此外，如果要在单击按钮后打开块显示，可以将该逻辑放在组件或服务中（在下面的示例中，该代码位于组件中）。

组件：

class MyComponent {
    private displayBlock = false;
    private turnOnBlockDisplay() {
        this.displayBlock = true;
    }
    private getBlockClass() {
        return this.displayBlock ? "block" : "";
    } 
    constructor (private myService: ToggleClassService, ...) {
        ...
    }
    ...
}

服务：

class ToggleClassService {
    private fadeIn = false;
    public toggleClass() {
        this.fadeIn = !this.fadeIn;
    }
    public getClass() {
        return this.fadeIn ? "fadeInRight" : "fadeOutRight";
    }
}

模板：

<div [ngClass]="['basket', 'animated', myService.getClass(), getBlockClass()]">...</div>
<button (click)="myService.toggleClass(); turnOnBlockDisplay();">Toggle</button>

CSS：

.basket {
    display: inline-block;
    ...
}
.basket.fadeInRight {
    background-color: red;
}
.basket.fadeOutRight {
    background-color: blue;
}
.basket.block {
    display: block;
}

您可以在this codepen中测试代码（注意：“服务”未注入）。

在Angular 2 Service中添加和删除类单击功能

2 个答案: