div 的边框绑定到 routerlink 指令？

Question

我遇到了一个问题，即使用 routerLink 的 div 在单击时会出现蓝色边框。我想我遗漏了一些非常明显的东西，甚至可能是我在浏览器中的配置或者一些遗漏的 css 样式，所以如果是的话，请礼貌地解释一下修复方法。

我在这里整理了该问题的基本演示 - https://github.com/DavidStreid/routingIssue。创建此问题的代码片段位于 src/app/allGreetings.component.html，我将其放在下面。只需从根 /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

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

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

Answer 2

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

如果您仍然想这样做，只需添加

.paddingDiv:focus {
  outline: 0;
}

给你的css

Answer 3

只需在 css 中添加此样式即可：

.paddingDiv:focus {
   outline: none;
}

您可以将它用于每个使用路由器 link 的 div 或使用：

 .paddingDiv:focus {
    outline: unset;
 }

Answer 4

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

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

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

div 的边框绑定到 routerlink 指令？

Border of div bound to routerlink directive?

routing

focus

ngfor

routerlink

angular