Question

我遇到过一个问题，使用routerLink的div在点击时会以蓝色为边界。我想我错过了一些非常明显的东西，甚至可能是我在浏览器中的配置或者一些错过的CSS样式，所以如果是这样，那么对修复的礼貌解释将会受到赞赏。

我在这里汇总了这个问题的基本演示 - https://github.com/DavidStreid/routingIssue。创建此问题的代码段位于src / app / allGreetings.component.html，我把它放在下面。只需从root，/ routingIssue下载并“npm install; npm start”，点击不同的问候语即可查看问题。我在Chrome中看到了这一点。

        <div *ngFor="let greeting of greetings" 
            class="col-xs-12 col-md-6 col-lg-4">
            <div class="paddingDiv"
                [routerLink]="greeting.routerLink">
                        <h3 class="greetingType">{{greeting.title}}</h3>    
            </div>
        </div>

编辑：这是unitario建议的更新版本，我仍然看到蓝色边框 -

        <a *ngFor="let greeting of greetings" 
            class="col-xs-12 col-md-6 col-lg-4">
            <a class="paddingDiv"
                (click)="onSelect(greeting)">
                        <h3 class="greetingType">{{greeting.title}}</h3>    
            </a>
        </a>

解：来自Shota Papiashvili。轮廓来自焦点选择器。我不想要边框，所以我删除它并添加了另一种焦点风格 -

    .paddingDiv:focus {
        outline: 0;
        background-color: black;
    }

Answer 1

其css outline属性，这对于辅助功能非常重要，您可以在以下位置阅读更多信息：http://www.outlinenone.com/

如果你还想这样做，只需添加

.paddingDiv:focus {
  outline: 0;
}

到你的css

Answer 2

不确定您使用的是哪个版本的路由器，但从版本3开始，您无法在除routerLink或a之外的任何其他元素上使用button。

如果您需要在div中使用它，请将click事件与Router和navigate一起使用。

Answer 3

是的，批准的答案将从特定选择器中删除轮廓。

如果您想从整个项目的所有[routerLink]中删除轮廓，那么下面的CSS会更有帮助。

 *[ng-reflect-router-link]:focus {
   outline: none;
 }

Answer 4

只需在CSS中添加此样式：

.paddingDiv:focus {
   outline: none;
}

您可以将其用于使用路由器链接的每个div 或使用：

 .paddingDiv:focus {
    outline: unset;
 }

div的边界绑定到routerlink指令？

4 个答案: