Question

这是我的模板

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

正如您所看到的，span中的div元素包含Hello和Everyone文本之间的下划线。

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

//** 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';
    }
}

小方注意，请在模板中使用双引号以防止解析错误：）

Angular 2动画中的Animate子元素

1 个答案: