1

我有一个问题......我的应用程序中有一个 Angular2 组件，它有一个像这样的模板（我已经简化了这个）......

<div [ngClass]="{'animate__left': applyTransitionClass}">
    <div>Sometimes we need to animate the whole thing...</div>

    <div [ngClass]="{'animate__more__left': applyPartialTransitionClass}">
        I am the child, sometimes I just want to amimate me and not the parent
    </div>
</div>

在我的组件中，我有以下 TypeScript 代码：

public applyTransitionClass: boolean = false;
public applyPartialTransitionClass: boolean = false;
public childAnimationListener: Function;
public wholeAnimationListener: Function;

constructor(private animationService:AnimationService, private renderer:Renderer, private elementRef:ElementRef) {

    // here I determine whether to use .. 'transitionend', 'oTransitionEnd','transitionend', 'webkitTransitionEnd'
    this.transitionEvent = this.animationService.whichTransitionEvent();

    this.animationService.doSomething.subscribe(resp => {
        // this activates / inits the ngClass on the whole template
        this.applyTransitionClass = true;
    });

    this.animationService.doSomethingElse.subscribe(resp => {
        // this activates / inits the ngClass on the child ONLY
        this.applyPartialTransitionClass = true;
    });
}

ngOnInit(): void {


    this.childAnimationListener = this.renderer.listen(this.elementRef.nativeElement.children[0], this.transitionEvent, () => {
        console.log('We caught the right animation... now move to something else');
        // do stuff...
    });

    this.wholeAnimationListener = this.renderer.listen(this.elementRef.nativeElement.children[0].children[1], this.transitionEvent, () => {
        console.log('We caught the right animation... The Child... now move to something else');
        // do stuff...
    });

}

现在，比如说我只想监听子 div / 元素的动画事件或触发子动画的 observable 应该运行它似乎两个侦听器都被触发，因为子是父的一部分......我也有请注意，父侦听器的输出在子侦听器之前执行。我想我可以将一个事件传递给回调函数以确定应用了动画的内容，但它似乎使renderer.listen函数的第一部分相当无用。也许我做错了？关于我应该如何监听组件模板特定部分的事件的任何建议。

如果这一切听起来令人困惑，请告诉我，我会改写这个......提前谢谢

4

0 回答 0