如何在 Angular 4 中使用焦点和失焦答案

【问题标题】：How to use focus and out of focus with Angular 4如何在 Angular 4 中使用焦点和失焦
【发布时间】：2017-08-01 03:24:43
【问题描述】：

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

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

我需要改变一个的颜色边框并且只在焦点上

【问题讨论】：

焦点的意思是，当它被点击？对吗？
对我来说是一种状态。单击后，元素将保持焦点，直到您单击其他位置。
对不起，如果我误解了一些东西，但如果你只想改变焦点元素的颜色边框，为什么不只使用 CSS 呢？喜欢.element:focus 选择器？
这是我的第一个想法。我试过了，但不知何故它不适用于这个标签。

标签： angular focus

【解决方案1】：

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

<a tabindex="0" ...>

之后，您可以使用伪类 ":focus" 对其进行样式设置。使用 CSS。

【讨论】：

非常感谢。我这样做了，并将大纲 none 放在 css 类上，现在一切正常。