angular - Angular 2动画中的动画子元素

Question

这是我的模板

<div class="navbarTitle" [@myTrigger]='state' (mouseenter)='animateUnderscore()'>Hello<span class="titleUnderscore">_</span>Everyone</div>

如您所见，在 Hello 和 Everyone 文本之间包含下划线的span元素。div

我的组件中切换文本颜色的方法（动画是使用组件装饰器中定义的角度动画完成的）

//** Within component
titleIsBlue: boolean = false;

//method which changes the color of the underscore on hover
animateUnderscore = () => {
    if (this.titleIsBlue) {
        state = 'black';
        titleIsBlue = false;
    } else {
        titleIsBlue = true;
        state = 'blue';
    }

}
//** Within Component

如何获取span包含下划线的元素以便更改它的颜色？

我不想使用 jQuery 或 Angular2 的 elementRef。

Answer 1

根据您要更改的属性，您可以使用例如[style.color]绑定来更改文本颜色：

<div class="navbarTitle" [@myTrigger]="state" (mouseenter)="animateUnderscore()">
   Hello
   <span class="titleUnderscore" [style.color]="underscoreColor">_</span>
   Everyone
</div>

在您的课程中，您必须定义此属性：

titleIsBlue: boolean = false;
underscoreColor: string = '#000';    

//method which changes the color of the underscore on hover
animateUnderscore = () => {
    if (this.titleIsBlue) {
        this.state = 'black';
        this.titleIsBlue = false;
        this.underscoreColor = '#F00';
    } else {
        this.titleIsBlue = true;
        this.state = 'blue';
        this.underscoreColor = '#00F';
    }
}

小旁注，请在模板中使用双引号以防止解析错误:)