Animate дочерний элемент в угловой 2 анимации

Question

Вот мой шаблон

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

Как вы можете видеть, что есть span элемента в div содержащего подчеркивание между Hello и каждый текстом.

метод в моем компоненте, который переключает цвет текста (анимация осуществляются с помощью угловой анимации, определенной в декораторе компонента)

//** 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'sRef.

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

Маленькое примечание стороны, используйте двойную цитату внутри шаблонов, чтобы предотвратить разбор эрсов :)