2017-08-01 37 views
1

我有一個名爲recipe-list的組件使用ngFor創建的列表。所有項目均使用組件配方項目構建。我想在聚焦時改變特定項目的風格。如何使用焦點和焦點與角4

下面是HTML:

對於偏方用品 - >

<a 
    class="list-group-item clearfix" 
    (click)="onSelected()" 
    style="cursor: pointer;"> 
    <div class="pull-left"> 
     <h4 class="list-group-item-heading">{{ recipe.name }}</h4> 
     <p class="list-group-item-text">{{ recipe.description }}</p> 
    </div> 
    <span class="pull-right"> 
     <img src="{{ recipe.imagePath }}" alt="{{ recipe.name }}" class="img-responsive" style="max-height: 50px; border-radius: 50%; width: 60px; Height: 60px;"> 
    </span> 
</a> 

的偏方列表 - >

<div class="row"> 
    <div class="col-xs-12"> 
    <button class="btn btn-success">New Recipe</button> 
    </div> 
</div> 
<hr> 
<div class="row"> 
    <div class="col-xs-12"> 
    <app-recipe-item 
    *ngFor="let recipeEl of recipes" 
    [recipe]="recipeEl"></app-recipe-item> 
    </div> 
</div> 

我需要改變的顏色邊框一個和唯一的焦點

+0

重點是指當它點擊了嗎?對 ? –

+0

對我來說是一個州。點擊後,元素會保持焦點,直到您點擊其他地方。 – Ruvalter

+2

對不起,如果我誤解了一些東西,但如果你想要改變被聚焦的元素的顏色邊界,爲什麼不使用CSS?像'.element:focus'選擇器? –

回答

0

要能夠把重點的元素,你需要添加屬性「tabindex」。

<a tabindex="0" ...> 

之後,您可以使用僞類「:focus」對其進行設計。使用CSS。

+0

非常感謝。我這樣做,並把大綱沒有在CSS類,現在一切正常工作。 – Ruvalter