Angular 绑定到routerlink指令的div边界？

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

我把这个问题的基本演示放在这里-。创建此问题的代码段位于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>

---

不确定您使用的路由器版本，但由于版本3，除了

a

或

按钮

之外，您不能在任何其他元素上使用

routerLink

---

如果您需要在

div

中使用它，那么将

单击

事件与

路由器

和

导航

一起使用它的css大纲属性，这对于可访问性非常重要，您可以在以下位置阅读更多内容：

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

.paddingDiv:focus {
  outline: 0;
}

---

在css中添加以下样式即可：

.paddingDiv:focus {
   outline: none;
}

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

---

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

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

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

---

谢谢不幸的是，即使我删除了与routerLink的绑定并用您的建议替换它，我仍然看到了蓝色边框。我还尝试将标记从div更改为a，结果相同。还有其他想法吗？就是这样！非常感谢你。整个周末我都很烦恼。我将看一看Angular 9中的docWorked。它在chrome中工作，但不是用Ionic构建的iOS应用程序。

.paddingDiv:focus {
   outline: none;
}

 .paddingDiv:focus {
    outline: unset;
 }

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