Angular 4 如何使用对焦和失焦

Question

我在名为 recipe-list 的组件中有一个使用 ngFor 创建的列表。所有项目都是使用组件配方项目构建的。我想在聚焦时更改特定项目的样式。

这是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>

我只需要在焦点上更改颜色边框

Answer 1

要获取元素的焦点，需要添加属性"tabindex"。

<a tabindex="0" ...>

之后，您可以使用伪class“:focus”来设置样式。使用 CSS.

Angular 4 如何使用对焦和失焦

How to use focus and out of focus with Angular 4

focus

angular